








































































































































































































                       <script>

var pop_up_info = "border: 0px solid black; background: rgba(0, 0, 0, 0.8); padding:15px; margin-top: 8px; border-radius:10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;";

// Create an array of styles for the map. There are three different styles for the different zoom levels.
var styles_modern = [
{
    "featureType": "administrative",
    "stylers": [
      { "visibility": "off" }
    ]
  },{
    "featureType": "road.highway",
    "elementType": "geometry.fill",
    "stylers": [
      { "color": "#ffffff" }
    ]
  },{
    "featureType": "road.highway",
    "elementType": "geometry.stroke",
    "stylers": [
      { "color": "#dbdbdb" }
    ]
  },{
    "featureType": "road.highway",
    "stylers": [
      { "visibility": "simplified" }
    ]
  },{
    "featureType": "road.highway",
    "elementType": "labels",
    "stylers": [
      { "visibility": "off" }
    ]
  },{
    "featureType": "road.arterial",
    "elementType": "geometry.fill",
    "stylers": [
      { "color": "#ffffff" }
    ]
  },{
    "featureType": "road.arterial",
    "elementType": "geometry.stroke",
    "stylers": [
      { "color": "#dbdbdb" }
    ]
  },{
    "featureType": "road.arterial",
    "elementType": "labels.text",
    "stylers": [
      { "color": "#ffffff" }
    ]
  },{
    "featureType": "road.arterial",
    "elementType": "labels.text.fill",
    "stylers": [
      { "color": "#555555" }
    ]
  },{
    "featureType": "road.arterial",
    "elementType": "labels",
    "stylers": [
      { "visibility": "off" }
    ]
  },{
    "featureType": "road.local",
    "elementType": "labels",
    "stylers": [
      { "visibility": "off" }
    ]
  },{
    "featureType": "road.local",
    "elementType": "geometry.fill",
    "stylers": [
      { "color": "#f0f0f0" }
    ]
  },{
    "featureType": "road.local",
    "elementType": "geometry.stroke",
    "stylers": [
      { "color": "#ffffff" }
    ]
  },{
    "featureType": "water",
    "elementType": "geometry.fill",
    "stylers": [
      { "color": "#b3cde6" }
    ]
  }, {
    "featureType": "poi",
    "elementType": "labels.icon",
    "stylers": [
      { "visibility": "off" }
    ]
  },{
    "featureType": "poi.business",
    "stylers": [
      { "visibility": "off" }
    ]
  },{
    "featureType": "poi.park",
    "elementType": "geometry.fill",
    "stylers": [
      { "color": "#d0ddb8" }
    ]
  },{
    "featureType": "poi.school",
    "stylers": [
      { "visibility": "off" }
    ]
  },{
    "featureType": "poi.medical",
    "elementType": "geometry",
    "stylers": [
      { "visibility": "on" },
      { "color": "#dfdfde" }
    ]
  },{
    "featureType": "poi.medical",
    "elementType": "geometry",
    "stylers": [
      { "visibility": "on" },
      { "color": "#dfdfde" }
    ]
  },{
    "featureType": "poi.medical",
    "elementType": "labels.text",
    "stylers": [
      { "visibility": "off" }
    ]
  },{
    "featureType": "transit.station.rail",
    "elementType": "labels",
    "stylers": [
      { "color": "#63523a" },
      { "visibility": "off" }
    ]
  },{
    "featureType": "transit.line",
    "stylers": [
      { "visibility": "off" }
    ]
  }
];
 
var styles_modern_zoomed = [
  {
    "featureType": "road.highway",
    "elementType": "geometry.fill",
    "stylers": [
      { "color": "#ffffff" }
    ]
  },{
    "featureType": "road.highway",
    "elementType": "geometry.stroke",
    "stylers": [
      { "color": "#dbdbdb" }
    ]
  },{
    "featureType": "road.highway",
    "elementType": "labels.text",
    "stylers": [
      { "color": "#ffffff" }
    ]
  },{
    "featureType": "road.highway",
    "elementType": "labels.text.fill",
    "stylers": [
      { "color": "#555555" }
    ]
  },{
    "featureType": "road.highway",
    "stylers": [
      { "visibility": "simplified" }
    ]
  },{
    "featureType": "road.highway",
    "elementType": "labels",
    "stylers": [
      { "visibility": "on" }
    ]
  },{
    "featureType": "road.arterial",
    "elementType": "geometry.fill",
    "stylers": [
      { "color": "#ffffff" }
    ]
  },{
    "featureType": "road.arterial",
    "elementType": "geometry.stroke",
    "stylers": [
      { "color": "#dbdbdb" }
    ]
  },{
    "featureType": "road.arterial",
    "elementType": "labels.text",
    "stylers": [
      { "color": "#ffffff" }
    ]
  },{
    "featureType": "road.arterial",
    "elementType": "labels.text.fill",
    "stylers": [
      { "color": "#555555" }
    ]
  },{
    "featureType": "road.arterial",
    "elementType": "labels",
    "stylers": [
      { "visibility": "on" }
    ]
  },{
    "featureType": "road.local",
    "elementType": "labels",
    "stylers": [
      { "visibility": "on" }
    ]
  },{
    "featureType": "road.local",
    "elementType": "geometry.fill",
    "stylers": [
      { "color": "#f0f0f0" }
    ]
  },{
    "featureType": "road.local",
    "elementType": "geometry.stroke",
    "stylers": [
      { "color": "#ffffff" }
    ]
  },{
    "featureType": "water",
    "elementType": "geometry.fill",
    "stylers": [
      { "color": "#b3cde6" }
    ]
  },{
    "featureType": "poi",
    "elementType": "labels.icon",
    "stylers": [
      { "visibility": "on" }
    ]
  },{
    "featureType": "poi.business",
    "stylers": [
      { "visibility": "on" }
    ]
  },{
    "featureType": "poi.park",
    "elementType": "geometry.fill",
    "stylers": [
      { "color": "#d0ddb8" }
    ]
  },{
    "featureType": "poi.school",
    "stylers": [
      { "visibility": "on" }
    ]
  },{
    "featureType": "poi.medical",
    "elementType": "geometry",
    "stylers": [
      { "visibility": "on" },
      { "color": "#dfdfde" }
    ]
  },{
    "featureType": "poi.medical",
    "elementType": "geometry",
    "stylers": [
      { "visibility": "on" },
      { "color": "#dfdfde" }
    ]
  },{
    "featureType": "poi.medical",
    "elementType": "labels.text",
    "stylers": [
      { "visibility": "on" }
    ]
  },{
    "featureType": "transit.station.rail",
    "elementType": "labels.text.fill",
    "stylers": [
      { "visibility": "on" },
      { "color": "#000000" }
    ]
  },{
    "featureType": "transit.line",
    "stylers": [
      { "visibility": "off" }
    ]
  }
];

var styles_modern_zoomed_more = [
  {
    "featureType": "road.highway",
    "elementType": "geometry.fill",
    "stylers": [
      { "color": "#ffffff" }
    ]
  },{
    "featureType": "road.highway",
    "elementType": "geometry.stroke",
    "stylers": [
      { "color": "#dbdbdb" }
    ]
  },{
    "featureType": "road.highway",
    "elementType": "labels.text",
    "stylers": [
      { "color": "#ffffff" }
    ]
  },{
    "featureType": "road.highway",
    "elementType": "labels.text.fill",
    "stylers": [
      { "color": "#555555" }
    ]
  },{
    "featureType": "road.highway",
    "elementType": "labels",
    "stylers": [
      { "visibility": "on" }
    ]
  },{
    "featureType": "road.arterial",
    "elementType": "geometry.fill",
    "stylers": [
      { "color": "#ffffff" }
    ]
  },{
    "featureType": "road.arterial",
    "elementType": "geometry.stroke",
    "stylers": [
      { "color": "#dbdbdb" }
    ]
  },{
    "featureType": "road.arterial",
    "elementType": "labels.text",
    "stylers": [
      { "color": "#ffffff" }
    ]
  },{
    "featureType": "road.arterial",
    "elementType": "labels.text.fill",
    "stylers": [
      { "color": "#555555" }
    ]
  },{
    "featureType": "road.arterial",
    "elementType": "labels",
    "stylers": [
      { "visibility": "on" }
    ]
  },{
    "featureType": "road.local",
    "elementType": "labels",
    "stylers": [
      { "visibility": "on" }
    ]
  },{
    "featureType": "road.local",
    "elementType": "geometry.fill",
    "stylers": [
      { "color": "#f0f0f0" }
    ]
  },{
    "featureType": "road.local",
    "elementType": "geometry.stroke",
    "stylers": [
      { "color": "#ffffff" }
    ]
  },{
    "featureType": "water",
    "elementType": "geometry.fill",
    "stylers": [
      { "color": "#b3cde6" }
    ]
  },{
    "featureType": "poi",
    "elementType": "labels.icon",
    "stylers": [
      { "visibility": "on" }
    ]
  },{
    "featureType": "poi.business",
    "stylers": [
      { "visibility": "on" }
    ]
  },{
    "featureType": "poi.park",
    "elementType": "geometry.fill",
    "stylers": [
      { "color": "#d0ddb8" }
    ]
  },{
    "featureType": "poi.school",
    "stylers": [
      { "visibility": "on" }
    ]
  },{
    "featureType": "poi.medical",
    "elementType": "geometry",
    "stylers": [
      { "visibility": "on" },
      { "color": "#dfdfde" }
    ]
  },{
    "featureType": "poi.medical",
    "elementType": "geometry",
    "stylers": [
      { "visibility": "on" },
      { "color": "#dfdfde" }
    ]
  },{
    "featureType": "poi.medical",
    "elementType": "labels.text",
    "stylers": [
      { "visibility": "on" }
    ]
  },{
    "featureType": "transit.station.rail",
    "elementType": "labels.text.fill",
    "stylers": [
      { "visibility": "on" },
      { "color": "#000000" }
    ]
  },{
    "featureType": "transit.line",
    "stylers": [
      { "visibility": "off" }
    ]
  }
];

//The 'map' variable is here so that it is 'global'. It is set in the function below becuase this is when the 'map_canvas' div is ready.
var map;

//Set the main center for the whole map. 
var mainLatLng = new google.maps.LatLng(50.799941, -1.059279);
 
// Create a new StyledMapType three objects.
var styled_modern = new google.maps.StyledMapType(styles_modern, {name: "Detailed modern style"});
var styled_modern_zoomed = new google.maps.StyledMapType(styles_modern_zoomed, {name: "Detailed modern style zoomed"});
var styled_modern_zoomed_more = new google.maps.StyledMapType(styles_modern_zoomed_more, {name: "Detailed modern style zoomed - more"});

//set the map options for the modern map. ie. the one displayed initially under the 1896 map. 
var mapOptionsModern = {
	zoom: 14,
	center: mainLatLng,
		  minZoom: 14,
		  maxZoom: 18,
		  panControl: false,
		  mapTypeControl: false,
		  mapTypeControlOptions: {
     		mapTypeIds: [ 'map_styles_modern', 'styled_modern_zoomed']
   		 }
};

//setting up the 1896 map overlay.
var oldMapOverlay = new google.maps.ImageMapType({
      getTileUrl: function(coord, zoom) {
		/*"use strict";*/ 
		return 'tiles/historic_tiles3' + '/' +zoom+ '/' +coord.x+ '/' + coord.y +'.png';
       },
       tileSize: new google.maps.Size(256, 256)
});
			
//This global variables record whether or not the old map overlay is set.
var old_map_set = 0;

//Marker global variables.
var markerDockyard;  
var markerPoint; 
var markerMaryRose; 
var markerWarrior; 
var markerSeafort; 
var markerSouthseaCastle; 
var markerCityMuseum; 
var markerHGWells; 
var markerJohnPounds; 
var markerConanDoyle; 
var markerMarines; 
var markerSSPLable; 
var markerBaffins;  
var markerHolbrooke; 
var markerUnwin; 
var markerEllis; 
var markerKipling; 
var markerEllen; 
var markerBlitz; 
var markerBrunel; 
var markerNelson; 
var markerDickens; 
var markerHillFort; 
var markerHillFortLable; 
var markerCastle; 
var markerCastleLable; 
var markerWindmill; 
var markerDock; 
var markerGunwarf; 
var markerCanoe; 
var markerTrain; 

var infoboxDockyard;
var infoboxPoint;
var infoboxMaryRose;
var infoboxWarrior;
var infoboxSeafort;
var infoboxSouthseaCastle;
var infoboxCityMuseum;
var infoboxHGWells;
var infoboxJohnPounds;
var infoboxConanDoyle;
var infoboxDday;
var infoboxMarines;
var infoboxSSPLable;
var infoboxBaffins;
var infoboxHolbrooke;
var infoboxUnwin;
var infoboxEllis;
var infoboxKipling;
var infoboxEllen;
var infoboxBlitz;
var infoboxBrunel;
var infoboxNelson;
var infoboxDickens;
var infoboxHillFort;
var infoboxCastle;
var infoboxHarbour;
var infoboxWindmill;
var infoboxDock;
var infoboxGunwarf;
var infoboxCanoe;
var infoboxTrain;

//Key people and places markers. 

var iconDockyard = {
  url: 'http://portsmouthhistory.co.uk/myicons/new/map_marker_victory-01.png',
  size: new google.maps.Size(228, 187),
  origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(80, 173)
};

var iconPoint = {
  url: 'http://portsmouthhistory.co.uk/myicons/new/map_marker_point-01.png',
  size: new google.maps.Size(166, 123),
  origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(57, 117)
};

var iconMaryRose = {
  url: 'http://portsmouthhistory.co.uk/myicons/new/map_marker_mary_rose-01.png',
  size: new google.maps.Size(271, 183),
  origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(83, 173)
};

var iconWarrior = {
  url: 'http://portsmouthhistory.co.uk/myicons/new/map_marker_warrior-01.png',
  size: new google.maps.Size(185, 128),
  origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(58, 117)
};

var iconSeafort = {
  url: 'http://portsmouthhistory.co.uk/myicons/new/map_marker_sea_forts-01.png',
  size: new google.maps.Size(262, 184),
  origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(81, 173)
};

var iconSouthseaCastle = {
  url: 'http://portsmouthhistory.co.uk/myicons/new/map_marker_southsea_castle-01.png',
  size: new google.maps.Size(192, 127),
  origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(56, 117)
};

var iconCityMuseum = {
  url: 'http://portsmouthhistory.co.uk/myicons/new/map_marker_city_museum-01.png',
  size: new google.maps.Size(81, 85),
  origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(38, 79)
};

var iconHGWells = {
  url: 'http://portsmouthhistory.co.uk/myicons/new/map_marker_hg_wells-01.png',
  size: new google.maps.Size(81, 88),
  origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(40, 79)
};

var iconJohnPounds = {
  url: 'http://portsmouthhistory.co.uk/myicons/new/map_marker_john_pounds-01.png',
  size: new google.maps.Size(80, 89),
  origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(40, 79)
};

var iconConanDoyle = {
  url: 'http://portsmouthhistory.co.uk/myicons/new/map_marker_conan_doyle-01.png',
  size: new google.maps.Size(80, 86),
  origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(39, 79)
};

var iconDday = {
  url: 'http://portsmouthhistory.co.uk/myicons/new/map_marker_d-day_museum-01.png',
  size: new google.maps.Size(193, 123),
  origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(57, 117)
};

var iconMarines = {
  url: 'http://portsmouthhistory.co.uk/myicons/new/map_marker_marines-01.png',
  size: new google.maps.Size(224, 123),
  origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(57, 117)
};

var iconSSPLable = {
  url: 'http://portsmouthhistory.co.uk/myicons/new/map_marker_ssp-01.png',
  size: new google.maps.Size(187, 88),
  origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(41, 79)
};

var iconBaffins = {
  url: 'http://portsmouthhistory.co.uk/myicons/new/map_marker_baffins_pond-01.png',
  size: new google.maps.Size(81, 86),
  origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(38, 79)
};

var iconHolbrooke = {
  url: 'http://portsmouthhistory.co.uk/myicons/new/map_marker_holbrooke-01.png',
  size: new google.maps.Size(79, 88),
  origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(39, 79)
};

var iconUnwin = {
  url: 'http://portsmouthhistory.co.uk/myicons/new/map_marker_unwin-01.png',
  size: new google.maps.Size(79, 88),
  origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(39, 79)
};

var iconEllis = {
  url: 'http://portsmouthhistory.co.uk/myicons/new/map_marker_owen-01.png',
  size: new google.maps.Size(90, 88),
  origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(39, 79)
};

var iconKipling = {
  url: 'http://portsmouthhistory.co.uk/myicons/new/map_marker_jungle_book-01.png',
  size: new google.maps.Size(80, 87),
  origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(38, 78)
};

var iconEllen = {
  url: 'http://portsmouthhistory.co.uk/myicons/new/map_marker_ellen_terran-01.png',
  size: new google.maps.Size(81, 86),
  origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(38, 78)
};

var iconBlitz = {
  url: 'http://portsmouthhistory.co.uk/myicons/new/map_marker_blitz-01.png',
  size: new google.maps.Size(166, 123),
  origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(57, 117)
};

var iconBrunel = {
  url: 'http://portsmouthhistory.co.uk/myicons/new/map_marker_brunel-01.png',
  size: new google.maps.Size(81, 88),
  origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(38, 78)
};

var iconNelson = {
  url: 'http://portsmouthhistory.co.uk/myicons/new/map_marker_nelson-01.png',
  size: new google.maps.Size(224, 123),
  origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(57, 116)
};

var iconDickens = {
  url: 'http://portsmouthhistory.co.uk/myicons/new/map_marker_dickens-01.png',
  size: new google.maps.Size(233, 185),
  origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(81, 175)
};

var iconHillFort = {
  url: 'http://portsmouthhistory.co.uk/myicons/new/map_marker_fort_nelson-01.png',
  size: new google.maps.Size(182, 123),
  origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(57, 116)
};

var iconHillFortLable = {
  url: 'http://portsmouthhistory.co.uk/myicons/new/map_marker_nelson_lable2-01.png',
  size: new google.maps.Size(200, 129),
  origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(60, 82)
};

var iconCastle = {
  url: 'http://portsmouthhistory.co.uk/myicons/new/map_marker_portchester-01.png',
  size: new google.maps.Size(213, 123),
  origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(57, 116)
};

var iconCastleLable = {
  url: 'http://portsmouthhistory.co.uk/myicons/new/map_marker_portchester_lable2-01.png',
  size: new google.maps.Size(248, 117),
  origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(60, 82)
};

var iconLabelHarbour = {
  url: 'http://portsmouthhistory.co.uk/myicons/new/map_marker_old_portsmouth-01.png',
  size: new google.maps.Size(214, 123),
  origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(56, 116)
};

var iconWindmill = {
  url: 'http://portsmouthhistory.co.uk/myicons/new/map_marker_windmill-01.png',
  size: new google.maps.Size(81, 86),
  origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(37, 78)
};

var iconDock = {
  url: 'http://portsmouthhistory.co.uk/myicons/new/map_marker_dockyard-01.png',
  size: new google.maps.Size(151, 110),
  origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(37, 78)
};

var iconGunwarf = {
  url: 'http://portsmouthhistory.co.uk/myicons/new/map_marker_gunwarf-01.png',
  size: new google.maps.Size(78, 88),
  origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(39, 79)
};

var iconTrain = {
  url: 'http://portsmouthhistory.co.uk/myicons/new/map_marker_train-01.png',
  size: new google.maps.Size(79, 88),
  origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(39, 79)
};

var iconCanoe = {
  url: 'http://portsmouthhistory.co.uk/myicons/new/map_marker_canoe_lake-01.png',
  size: new google.maps.Size(79, 88),
  origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(39, 79)
};



var iconCityMuseumZoomed = {
  url: 'http://portsmouthhistory.co.uk/myicons/new/map_marker_city_museum_zoomed-01.png',
  size: new google.maps.Size(148, 85),
  origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(38, 79)
};

var iconHGWellsZoomed = {
  url: 'http://portsmouthhistory.co.uk/myicons/new/map_marker_hg_wells_zoomed-01.png',
  size: new google.maps.Size(131, 88),
  origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(40, 79)
};

var iconJohnPoundsZoomed = {
  url: 'http://portsmouthhistory.co.uk/myicons/new/map_marker_john_pounds_zoomed-01.png',
  size: new google.maps.Size(147, 89),
  origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(40, 79)
};

var iconConanDoyleZoomed = {
  url: 'http://portsmouthhistory.co.uk/myicons/new/map_marker_conan_doyle_zoomed-01.png',
  size: new google.maps.Size(138, 86),
  origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(39, 79)
};

var iconSSPLableZoomed = {
  url: 'http://portsmouthhistory.co.uk/myicons/new/map_marker_ssp_zoomed-01.png',
  size: new google.maps.Size(187, 88),
  origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(41, 79)
};

var iconBaffinsZoomed = {
  url: 'http://portsmouthhistory.co.uk/myicons/new/map_marker_baffins_pond_zoomed-01.png',
  size: new google.maps.Size(142, 86),
  origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(38, 79)
};

var iconHolbrookeZoomed = {
  url: 'http://portsmouthhistory.co.uk/myicons/new/map_marker_holbrooke_zoomed-01.png',
  size: new google.maps.Size(186, 88),
  origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(39, 79)
};

var iconUnwinZoomed = {
  url: 'http://portsmouthhistory.co.uk/myicons/new/map_marker_unwin_zoomed-01.png',
  size: new google.maps.Size(186, 88),
  origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(39, 79)
};

var iconEllisZoomed = {
  url: 'http://portsmouthhistory.co.uk/myicons/new/map_marker_owen_zoomed-01.png',
  size: new google.maps.Size(173, 88),
  origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(39, 79)
};

var iconKiplingZoomed = {
  url: 'http://portsmouthhistory.co.uk/myicons/new/map_marker_jungle_book_zoomed-01.png',
  size: new google.maps.Size(151, 87),
  origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(38, 78)
};

var iconEllenZoomed = {
  url: 'http://portsmouthhistory.co.uk/myicons/new/map_marker_ellen_terran_zoomed-01.png',
  size: new google.maps.Size(138, 86),
  origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(38, 78)
};

var iconBrunelZoomed = {
  url: 'http://portsmouthhistory.co.uk/myicons/new/map_marker_brunel_zoomed-01.png',
  size: new google.maps.Size(212, 88),
  origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(38, 78)
};

var iconWindmillZoomed = {
  url: 'http://portsmouthhistory.co.uk/myicons/new/map_marker_windmill_zoomed-01.png',
  size: new google.maps.Size(180, 86),
  origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(37, 79)
};

var iconDockZoomed = {
  url: 'http://portsmouthhistory.co.uk/myicons/new/map_marker_dockyard_zoomed-01.png',
  size: new google.maps.Size(193, 123),
  origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(57, 115)
};

var iconGunwarfZoomed = {
  url: 'http://portsmouthhistory.co.uk/myicons/new/map_marker_gunwarf_zoomed-01.png',
  size: new google.maps.Size(186, 88),
  origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(38, 78)
};

var iconTrainZoomed = {
  url: 'http://portsmouthhistory.co.uk/myicons/new/map_marker_train_zoomed-01.png',
  size: new google.maps.Size(163, 88),
  origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(38, 78)
};

var iconCanoeZoomed = {
  url: 'http://portsmouthhistory.co.uk/myicons/new/map_marker_canoe_lake_zoomed-01.png',
  size: new google.maps.Size(141, 88),
  origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(38, 78)
};

var iconLabelWelcome = {
  url: 'http://portsmouthhistory.co.uk/pics/template_images/welcome_message_welcome-new_welcome-07.png',
  size: new google.maps.Size(500, 324),
  origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(250, 162)
};

//Shape of the clickable areas. 

var shapeDockyard = {
      coord: [23,32,53,13,83,6,127,23,141,47,152,58,216,58,218,101,150,103,132,128,99,150,70,152,24,127,9,90],
      type: 'poly'
};

var shapePoint = {
      coord: [10,53,22,23,57,9,90,23,101,38,154,38,155,78,100,78,85,90,57,103,24,89],
      type: 'poly'
};

var shapeMaryRose = {
      coord: [84,7,135,30,152,57,257,58,259,101,152,103,126,138,83,152,25,122,14,80,23,41,50,19],
      type: 'poly'
};

var shapeWarrior = {
      coord: [58,10,88,24,101,41,174,40,174,79,101,78,81,96,45,100,22,82,12,52,31,20],
      type: 'poly'
};

var shapeSeafort = {
      coord: [83,8,125,25,150,56,250,57,252,102,150,103,129,129,80,152,34,131,13,90,20,50,47,20],
      type: 'poly'
};

var shapeSouthseaCastle = {
      coord: [56,12,89,24,100,38,180,41,181,80,98,79,82,92,57,102,23,86,11,53,31,20],
      type: 'poly'
};

var shapeCityMuseum = {
      coord: [38,5,60,16,70,41,60,60,39,69,16,59,7,37,18,13],
      type: 'poly'
};

var shapeHGWells = {
      coord: [37,5,60,15,69,43,59,63,38,69,20,62,7,46,10,26,22,11],
      type: 'poly'
};

var shapeJohnPounds = {
      coord: [41,5,62,16,69,44,60,63,40,69,18,62,9,42,18,13],
      type: 'poly'
};

var shapeConanDoyle = {
      coord: [38,4,61,14,69,43,61,60,37,69,14,58,7,38,16,14],
      type: 'poly'
};

var shapeDDay = {
      coord: [58,8,88,20,102,37,178,39,178,79,101,79,87,90,58,102,23,87,12,53,28,18],
      type: 'poly'
};

var shapeMarines = {
      coord: [57,7,91,19,100,38,210,39,214,75,100,78,80,94,40,97,17,77,13,50,28,20],
      type: 'poly'
};

var shapeSSPLable = {
      coord: [43,5,67,18,70,43,63,63,40,70,18,60,11,36,22,13],
      type: 'poly'
};

var shapeBaffins = {
      coord: [38,4,60,14,70,42,61,61,38,71,13,60,8,38,17,13],
      type: 'poly'
};

var shapeHolbrooke = {
      coord: [39,5,62,14,67,44,60,64,37,72,13,60,7,39,15,13],
      type: 'poly'
};

var shapeUnwin = {
      coord: [38,4,63,15,68,42,61,64,38,72,17,62,7,38,19,13],
      type: 'poly'
};

var shapeEllis= {
      coord: [38,5,62,19,68,44,59,62,38,71,16,60,8,39,15,15],
      type: 'poly'
};


var shapeKipling = {
      coord: [38,4,63,15,68,42,61,64,38,72,17,62,7,38,19,13],
      type: 'poly'
};

var shapeEllen = {
      coord: [38,4,63,15,68,42,61,64,38,72,17,62,7,38,19,13],
      type: 'poly'
};

var shapeBlitz = {
      coord: [59,8,89,21,103,38,155,40,156,79,101,78,82,93,56,103,26,90,11,55,26,23],
      type: 'poly'
};

var shapeBrunel = {
      coord: [38,4,63,15,68,42,61,64,38,72,17,62,7,38,19,13],
      type: 'poly'
};

var shapeNelson = {
      coord: [58,6,89,19,101,36,212,40,212,79,101,77,83,91,58,102,24,88,9,55,20,27],
      type: 'poly'
};

var shapeDickens = {
      coord: [85,7,130,26,148,61,221,60,221,100,152,100,129,132,82,156,40,137,17,113,11,79,24,45,44,20],
      type: 'poly'
};

var shapeHillFort = {
      coord: [56,8,89,20,101,35,171,38,172,78,100,78,85,92,57,103,30,91,12,65,15,41,33,18],
      type: 'poly'
};

var shapeHillFortLable = {
      coord: [78,29,104,40,119,55,186,56,188,96,117,95,102,109,76,124,42,108,25,76,43,39],
      type: 'poly'
};

var shapeCastle = {
      coord: [57,7,88,20,101,39,200,39,202,78,100,78,84,93,57,102,23,85,12,56,27,19],
      type: 'poly'
};

var shapeCastleLable = {
      coord: [92,13,124,24,138,40,237,42,239,83,133,82,118,98,96,106,57,90,45,58,61,23],
      type: 'poly'
};

var shapeLabelHarbour = {
      coord: [58,6,89,21,102,37,202,37,204,77,101,76,87,91,57,103,35,97,12,65,18,34,38,15],
      type: 'poly'
};

var shapeWindmill = {
      coord: [38,6,15,16,9,42,19,61,39,72,58,63,69,41,62,16],
      type: 'poly'
};

var shapeDock = {
      coord: [90,7,126,22,140,54,126,90,97,105,60,89,46,56,61,19],
      type: 'poly'
};

var shapeGunwarf = {
      coord: [38,6,15,16,9,42,19,61,39,72,58,63,69,41,62,16],
      type: 'poly'
};

var shapeCanoe = {
      coord: [38,6,15,16,9,42,19,61,39,72,58,63,69,41,62,16],
      type: 'poly'
};

var shapeTrain = {
      coord: [38,6,15,16,9,42,19,61,39,72,58,63,69,41,62,16],
      type: 'poly'
};

//shape of the clickable area when zoomed - for the markers that change when zoomed.
var shapeCityMuseumZoomed = {
      coord: [40,5,56,12,64,16,141,18,141,54,67,54,59,62,38,70,15,59,6,40,15,13],
      type: 'poly'
};

var shapeHGWellsZoomed = {
      coord: [39,5,65,17,120,18,120,57,68,58,40,70,13,57,8,38,19,15],
      type: 'poly'
};

var shapeJohnPoundsZoomed = {
      coord: [41,4,67,16,135,16,137,57,66,56,39,71,15,59,8,38,19,12],
      type: 'poly'
};

var shapeConanDoyleZoomed = {
      coord: [40,5,67,17,129,18,130,55,68,56,39,69,12,57,9,31,18,11],
      type: 'poly'
};

var shapeSSPLableZoomed = {
      coord: [42,5,68,17,175,17,177,56,70,56,41,71,12,55,11,28,24,11],
      type: 'poly'
};

var shapeBaffinsZoomed = {
      coord: [37,3,65,16,130,16,130,57,66,57,39,70,13,59,6,33,18,11],
      type: 'poly'
};

var shapeHolbrookeZoomed = {
      coord: [39,5,64,16,170,16,174,55,67,57,37,70,12,60,7,40,16,14],
      type: 'poly'
};

var shapeUnwinZoomed = {
      coord: [39,4,64,16,171,17,172,55,66,59,37,71,14,62,6,34,18,11],
      type: 'poly'
};

var shapeEllisZoomed = {
      coord: [38,3,66,18,161,18,163,58,67,58,38,71,15,61,8,36,17,13],
      type: 'poly'
};

var shapeKiplingZoomed = {
      coord: [38,4,64,17,137,18,141,55,65,56,37,71,18,62,5,38,15,12],
      type: 'poly'
};

var shapeEllenZoomed = {
      coord: [38,3,65,15,127,15,129,52,67,55,39,69,16,62,5,39,14,13],
      type: 'poly'
};

var shapeBrunelZoomed = {
      coord: [42,5,66,17,201,15,201,57,66,57,39,71,15,62,7,35,17,11],
      type: 'poly'
};

var shapeWindmillZoomed = {
      coord: [38,5,63,14,130,16,130,35,131,53,67,55,54,63,38,69,12,55,6,38,14,14],
      type: 'poly'
};

var shapeDockZoomed = {
      coord: [59,9,87,20,100,38,183,38,187,77,99,77,86,88,57,104,21,89,7,59,26,20],
      type: 'poly'
};

var shapeGunwarfZoomed = {
      coord: [13,15,38,5,64,16,102,17,161,17,167,36,162,58,74,57,54,62,40,68,10,55,7,35],
      type: 'poly'
};

var shapeCanoeZoomed = {
      coord: [41,4,65,14,129,16,130,36,127,56,71,56,57,61,39,70,13,57,12,19],
      type: 'poly'
};

var shapeTrainZoomed = {
      coord: [37,5,66,15,151,16,153,55,68,57,42,69,21,63,8,39,15,13],
      type: 'poly'
};

var shapeWelcome = {
      coord: [452,17,483,17,483,35,452,35],
      type: 'poly'
};

var contentDockyard = document.createElement("div");
contentDockyard.style.cssText = pop_up_info;		
contentDockyard.innerHTML = '<p>Loading. Please try again.</p>';

var contentPoint = document.createElement("div");
contentPoint.style.cssText = pop_up_info;
contentPoint.innerHTML = '<p>Loading. Please try again.</p>';

var contentMaryRose = document.createElement("div");
contentMaryRose.style.cssText = pop_up_info;	
contentMaryRose.innerHTML = '<p>Loading. Please try again.</p>';

var contentWarrior = document.createElement("div");
contentWarrior.style.cssText = pop_up_info;	
contentWarrior.innerHTML = '<p>Loading. Please try again.</p>';

var contentSeafort = document.createElement("div");
contentSeafort.style.cssText = pop_up_info;
contentSeafort.innerHTML = '<p>Loading. Please try again.</p>';

var contentSouthseaCastle = document.createElement("div");
contentSouthseaCastle.style.cssText = pop_up_info;
contentSouthseaCastle.innerHTML = '<p>Loading. Please try again.</p>';

var contentCityMuseum = document.createElement("div");
contentCityMuseum.style.cssText = pop_up_info;	
contentCityMuseum.innerHTML = "<p>Loading. Please try again.</p>";

var contentHGWells = document.createElement("div");
contentHGWells.style.cssText = pop_up_info;
contentHGWells.innerHTML = '<p>Loading. Please try again.</p>';

var contentJohnPounds = document.createElement("div");
contentJohnPounds.style.cssText = pop_up_info;
contentJohnPounds.innerHTML = "<p>Loading. Please try again.</p>";

var contentConanDoyle = document.createElement("div");
contentConanDoyle.style.cssText = pop_up_info;	
contentConanDoyle.innerHTML = "<p>Loading. Please try again.</p>";

var contentDday = document.createElement("div");
contentDday.style.cssText = pop_up_info;
contentDday.innerHTML = "<p>Loading. Please try again.</p>";

var contentMarines = document.createElement("div");
contentMarines.style.cssText = pop_up_info;	
contentMarines.innerHTML = '<p>Loading. Please try again.</p>';

var contentSSPLable = document.createElement("div");
contentSSPLable.style.cssText = pop_up_info;
contentSSPLable.innerHTML = '<p>Loading. Please try again.</p>';

var contentBaffins = document.createElement("div");
contentBaffins.style.cssText = pop_up_info;
contentBaffins.innerHTML = '<p>Loading. Please try again.</p>';	

var contentHolbrooke = document.createElement("div");
contentHolbrooke.style.cssText = pop_up_info;
contentHolbrooke.innerHTML = "<p>Loading. Please try again.</p>";

var contentUnwin = document.createElement("div");
contentUnwin.style.cssText = pop_up_info;
contentUnwin.innerHTML = "<p>Loading. Please try again.</p>";

var contentEllis = document.createElement("div");
contentEllis.style.cssText = pop_up_info;	
contentEllis.innerHTML = "<p>Loading. Please try again.</p>";

var contentKipling = document.createElement("div");
contentKipling.style.cssText = pop_up_info;
contentKipling.innerHTML = "<p>Loading. Please try again.</p>";

var contentEllen = document.createElement("div");
contentEllen.style.cssText = pop_up_info;	
contentEllen.innerHTML = "<p>Loading. Please try again.</p>";

var contentBlitz = document.createElement("div");
contentBlitz.style.cssText = pop_up_info;
contentBlitz.innerHTML = '<p>Loading. Please try again.</p>';

var contentBrunel = document.createElement("div");
contentBrunel.style.cssText = pop_up_info;
contentBrunel.innerHTML = '<p>Loading. Please try again.</p>';

var contentNelson = document.createElement("div");
contentNelson.style.cssText = pop_up_info;
contentNelson.innerHTML = '<p>Loading. Please try again.</p>';

var contentDickens = document.createElement("div");
contentDickens.style.cssText = pop_up_info;
contentDickens.innerHTML = '<p>Loading. Please try again.</p>';

var contentHillFort = document.createElement("div");
contentHillFort.style.cssText = pop_up_info;
contentHillFort.innerHTML = '<p>Loading. Please try again.</p>';

var contentCastle = document.createElement("div");
contentCastle.style.cssText = pop_up_info;		
contentCastle.innerHTML = '<p>Loading. Please try again.</p>';

var contentHarbour = document.createElement("div");
contentHarbour.style.cssText = pop_up_info;
contentHarbour.innerHTML = '<p>Loading. Please try again.</p>';

var contentWindmill = document.createElement("div");
contentWindmill.style.cssText = pop_up_info;
contentWindmill.innerHTML = "<p>Loading. Please try again.</p>";

var contentDockZoomed = document.createElement("div");
contentDockZoomed.style.cssText = pop_up_info;
contentDockZoomed.innerHTML = '<p>Loading. Please try again.</p>';

var contentGunwarf = document.createElement("div");
contentGunwarf.style.cssText = pop_up_info;	
contentGunwarf.innerHTML = "<p>Loading. Please try again.</p>";

var contentTrain = document.createElement("div");
contentTrain.style.cssText = pop_up_info;	
contentTrain.innerHTML = "<p>Loading. Please try again.</p>";

var contentCanoe = document.createElement("div");
contentCanoe.style.cssText = pop_up_info;	
contentCanoe.innerHTML = "<p>Loading. Please try again.</p>";

//Global variables for the photo markers and infoboxes.
imageMarker = [];
ib = [];

//Photo markers
var iconURL = 'http://portsmouthhistory.co.uk/pics/template_images/marker_blue2.png';	
var iconURLclicked = 'http://portsmouthhistory.co.uk/pics/template_images/marker_red2.png';

//Are photos currently showing indicator.
imagesAddedIndicator = 0;

var currentImage = "none";

//Variables related to showing the old photographs
var secretKey = 0;
var mylat = [];
var mylong = [];
var photoTitle = [];
var photoURL = [];
var photoWidth = [];
var saveWidthArray = [];
var frog = 0;
var widthread  = 0;

var picWidthCounter = 0;
var firstImageOpen = 0;		
var widthTemp2 = 0;		
var boxText = document.createElement("div");

//Related to the semi-transparent black effect that appears when click to show the old photograph markers.
var overlay = new ItpOverlay("map_canvas");	

//Creating the top and side bar divs.

var sideBarTitleDiv = document.createElement('div');
var sideBarTitle = new SideBarTitle(sideBarTitleDiv, map);

var topBarTitleModernDiv = document.createElement('div');
var topBarTitleModern = new TopBarTitleModern(topBarTitleModernDiv, map);

var topBarTitleOldMapDiv = document.createElement('div');
var topBarTitleOldMap = new TopBarTitleOldMap(topBarTitleOldMapDiv, map);

var topBarTitleAboutDiv = document.createElement('div');
var topBarTitleAbout = new TopBarTitleAbout(topBarTitleAboutDiv, map);

var peopleHidden = 0;
var willNeedRecentering = 0;
var mobileOrNot;

var maryRoseVideo = document.createElement("iframe");

maryRoseVideo.src="http://www.youtube.com/embed/QeSkWg_y8z0";
maryRoseVideo.width="470";
maryRoseVideo.height="225";
maryRoseVideo.frameborder="0";

//THE MAIN FUNCTION------------------------------------------------------------------------------------------------------------------

function initialize()	{
/*"use strict";*/ 
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptionsModern);

//Associate the styled map with the MapTypeId and set it to display.
map.mapTypes.set('map_styles_modern', styled_modern);
map.mapTypes.set('map_styles_modern_zoomed', styled_modern_zoomed);
map.mapTypes.set('map_styles_modern_zoomed_more', styled_modern_zoomed_more);
map.setMapTypeId('map_styles_modern');

//adds welcome message
welcomeMessage ();

//Listen out for is the zoom level has changes.
google.maps.event.addListener(map, "zoom_changed", function() {
	
	welcomeMessageHide();
	var newZoom = map.getZoom();
	/*alert(newZoom);*/
	if (newZoom < 15){
		showPortsmouthMarkersZoomedOut();
			if (peopleHidden === 0){
			markerDock.setVisible (true); 
			}
		}
		else {
		showPortsmouthMarkersZoomedIn();
			if (peopleHidden === 0){
			markerDockZoomed.setVisible (true); 
			}
	}
	if (newZoom === 14){
		map.setMapTypeId('map_styles_modern');
	}
	else if (newZoom === 15)
	{
		map.setMapTypeId('map_styles_modern_zoomed');		
	}
	else {
		map.setMapTypeId('map_styles_modern_zoomed_more');		
	}	

});

//make sure the top and side bars appear on top - check if this is exactly the right method 
sideBarTitleDiv.index = 1;

//Add the first two default blocks to the side bar area. (Ahe other one is added as different maps are selected)
map.controls[google.maps.ControlPosition.RIGHT_TOP].push(sideBarTitleDiv);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(topBarTitleOldMapDiv);

map.overlayMapTypes.insertAt(0, oldMapOverlay);
old_map_set = 1;

//Load info (e.g. people etc) that go on the historic map
loadHistoricData();

//preload myicons
//preloadIcons();

//END OF MAIN FUNCTION -----------------------------------------------------------------------------------

}

google.maps.event.addDomListener(window, 'load', initialize);

//Set of functions to create the content for the divs that go in the side and top bar---------

function SideBarTitle (sideBarTitleDiv, map){
  /*"use strict";*/ 
  sideBarTitleDiv.style.padding = '0px';  
  controlUI1 = document.createElement('div');
  controlUI1.style.backgroundColor = '#b3cde6';
  controlUI1.style.border='2px solid white';
  controlUI1.style.borderRadius='10px';
  controlUI1.style.margin='10px';
  controlUI1.style.paddingTop='11px';
  controlUI1.style.paddingBottom='5px';
  controlUI1.style.paddingLeft='0px';
  controlUI1.style.paddingRight='0px';
  controlUI1.style.width='210px';
  controlUI1.style.height='468px';
  controlUI1.innerHTML = '<div align="center"><img src="http://portsmouthhistory.co.uk/pics/template_images/mockup3_title.jpg" width="206" height="134" border="0"/></div>';
  sideBarTitleDiv.appendChild(controlUI1);
  
   greyBar = document.createElement('div');
   greyBar.style.backgroundColor = '#4D4D4D';
   greyBar.style.height='16px';
   greyBar.style.marginTop='0px';
   greyBar.style.marginBottom='0px';
   greyBar.style.marginLeft='0px';
   greyBar.style.marginRight='0px';
   greyBar.style.paddingTop='2px';
   greyBar.style.paddingBottom='2px';
   greyBar.style.paddingLeft='0px';
   greyBar.style.paddingRight='0px';
   greyBar.style.fontFamily='Georgia, serif';
   greyBar.style.fontSize='14px';
   greyBar.style.color='#ffffff';
   greyBar.innerHTML = '<div align="center" style="font-family:Georgia, serif; font-size:14px;">Menu</div>';
   controlUI1.appendChild(greyBar);
  
  mainMenu = document.createElement('div');
  mainMenu.style.backgroundColor = '#F2F2F2';
  mainMenu.style.height='250px';
  mainMenu.style.marginTop='0px';
  mainMenu.style.marginBottom='5px';
  mainMenu.style.marginLeft='0px';
  mainMenu.style.marginRight='0px';
  mainMenu.style.paddingTop = '10px';
  mainMenu.style.paddingBottom= '4px';
  mainMenu.style.paddingLeft = '4px';
  mainMenu.style.paddingRight = '4px';
   
  
  //1896 map -----------------
  mainMenuOldUnselected = document.createElement('div');
  mainMenuOldUnselected.style.display='none';
  mainMenuOldUnselected.style.fontFamily='Georgia, serif';
  mainMenuOldUnselected.style.fontSize='16px';
  mainMenuOldUnselected.style.paddingLeft='32px';
  mainMenuOldUnselected.style.height='37px';
  mainMenuOldUnselected.innerHTML = '<div id="menu_old_map_unselected" style="padding-top:10px; height:37px; font-family:Georgia, serif; font-size:16px;" onClick="changeMap(\'old_map\')" OnMouseOver="this.style.cursor=\'pointer\';" OnMouseOut="this.style.cursor=\'default\';">1896 map</div>';
  mainMenu.appendChild(mainMenuOldUnselected);
  mainMenuOldSelected = document.createElement('div');
  mainMenuOldSelected.style.display='block';
  mainMenuOldSelected.style.fontFamily='Georgia, serif';
  mainMenuOldSelected.style.fontSize='16px';
  mainMenuOldSelected.style.paddingLeft='32px';
  mainMenuOldSelected.style.height='37px';
  mainMenuOldSelected.style.backgroundImage = 'url(http://portsmouthhistory.co.uk/pics/template_images/mockup4-06.png)';
  mainMenuOldSelected.style.backgroundRepeat = 'no-repeat';
  mainMenuOldSelected.innerHTML = '<div id="menu_old_map_selected" style="padding-top:10px; height:37px; font-family:Georgia, serif; font-size:16px;" onClick="changeMap(\'old_map\')" OnMouseOver="this.style.cursor=\'pointer\';" OnMouseOut="this.style.cursor=\'default\';">1896 map</div>';
  mainMenu.appendChild(mainMenuOldSelected);
  
  //Modern map -----------------
  mainMenuModernUnselected = document.createElement('div');
  mainMenuModernUnselected.style.display='block';
  mainMenuModernUnselected.style.fontFamily='Georgia, serif';
  mainMenuModernUnselected.style.fontSize='16px';
  mainMenuModernUnselected.style.paddingLeft='32px';
  mainMenuModernUnselected.style.height='37px';
  mainMenuModernUnselected.innerHTML = '<div id="menu_modern_map_unselected" style="padding-top:10px; height:37px; font-family:Georgia, serif; font-size:16px;" onClick="changeMap(\'modern\')" OnMouseOver="this.style.cursor=\'pointer\';" OnMouseOut="this.style.cursor=\'default\';" > Modern map </div>';
  mainMenu.appendChild(mainMenuModernUnselected);
  mainMenuModernSelected = document.createElement('div');  
  mainMenuModernSelected.style.display='none';
  mainMenuModernSelected.style.fontFamily='Georgia, serif';
  mainMenuModernSelected.style.fontSize='16px';
  mainMenuModernSelected.style.paddingLeft='32px';
  mainMenuModernSelected.style.height='37px';
  mainMenuModernSelected.style.backgroundImage = 'url(http://portsmouthhistory.co.uk/pics/template_images/mockup4-06.png)';
  mainMenuModernSelected.style.backgroundRepeat = 'no-repeat';
  mainMenuModernSelected.innerHTML = '<div id="menu_modern_map_selected" style="padding-top:10px; height:37px; font-family:Georgia, serif; font-size:16px;" onClick="changeMap(\'modern\')" OnMouseOver="this.style.cursor=\'pointer\';" OnMouseOut="this.style.cursor=\'default\';" >Modern map</div>';
  mainMenu.appendChild(mainMenuModernSelected); 
  
   greyBar1 = document.createElement('div');
   greyBar1.style.backgroundColor = '#4D4D4D';
   greyBar1.style.height='1px';
   greyBar1.style.marginTop='0px';
   greyBar1.style.marginBottom='0px';
   greyBar1.style.marginLeft='32px';
   greyBar1.style.marginRight='35px';
   greyBar1.style.marginTop='15px';
   greyBar1.style.marginBottom='15px';
   greyBar1.style.paddingLeft='0px';
   greyBar1.style.paddingRight='0px';
   greyBar1.style.color='#ffffff';
   mainMenu.appendChild(greyBar1);
 
  //People and places ----------------- 
  
  mainMenuPeopleUnselected = document.createElement('div');
  mainMenuPeopleUnselected.style.display='none';
  mainMenuPeopleUnselected.style.fontFamily='Georgia, serif';
  mainMenuPeopleUnselected.style.fontSize='16px';
  mainMenuPeopleUnselected.style.paddingLeft='32px';
  mainMenuPeopleUnselected.style.height='37px';
  mainMenuPeopleUnselected.innerHTML = '<div style="padding-top:10px; height:37px; font-family:Georgia, serif; font-size:16px;" onClick="changeMap(\'peopleShow\')" OnMouseOver="this.style.cursor=\'pointer\';" OnMouseOut="this.style.cursor=\'default\';">People and places</div>';
  mainMenu.appendChild(mainMenuPeopleUnselected);
	
  mainMenuPeopleSelected = document.createElement('div');
  mainMenuPeopleSelected.style.display='block';
  mainMenuPeopleSelected.style.fontFamily='Georgia, serif';
  mainMenuPeopleSelected.style.fontSize='16px';
  mainMenuPeopleSelected.style.paddingLeft='32px';
  mainMenuPeopleSelected.style.height='37px';
  mainMenuPeopleSelected.style.backgroundImage = 'url(http://portsmouthhistory.co.uk/pics/template_images/mockup4-06.png)';
  mainMenuPeopleSelected.style.backgroundRepeat = 'no-repeat';
  mainMenuPeopleSelected.innerHTML = '<div style="padding-top:10px; height:37px; font-family:Georgia, serif; font-size:16px;" onClick="changeMap(\'peopleHide\')" OnMouseOver="this.style.cursor=\'pointer\';" OnMouseOut="this.style.cursor=\'default\';">People and places </div>';
  mainMenu.appendChild(mainMenuPeopleSelected);
  
  //Photos -----------------  
  mainMenuPhotosUnselected = document.createElement('div');
  mainMenuPhotosUnselected.style.display='block';
  mainMenuPhotosUnselected.style.fontFamily='Georgia, serif';
  mainMenuPhotosUnselected.style.fontSize='16px';
  mainMenuPhotosUnselected.style.paddingLeft='32px';
  mainMenuPhotosUnselected.style.height='37px';
  mainMenuPhotosUnselected.innerHTML = '<div style="padding-top:10px; height:37px; width: 141px; font-family:Georgia, serif; font-size:16px;" onClick="changeMap(\'photosShow\')" OnMouseOver="this.style.cursor=\'pointer\';" OnMouseOut="this.style.cursor=\'default\';">Old photographs </div>';
  mainMenu.appendChild(mainMenuPhotosUnselected);
	
  mainMenuPhotosSelected = document.createElement('div');
  mainMenuPhotosSelected.style.display='none';
  mainMenuPhotosSelected.style.fontFamily='Georgia, serif';
  mainMenuPhotosSelected.style.fontSize='16px';
  mainMenuPhotosSelected.style.paddingLeft='32px';
  mainMenuPhotosSelected.style.height='37px';
  mainMenuPhotosSelected.style.backgroundImage = 'url(http://portsmouthhistory.co.uk/pics/template_images/mockup4-06.png)';
  mainMenuPhotosSelected.style.backgroundRepeat = 'no-repeat';
  mainMenuPhotosSelected.innerHTML = '<div style="padding-top:10px; height:37px; width: 141px; font-family:Georgia, serif; font-size:16px;" onClick="changeMap(\'photosHide\')" OnMouseOver="this.style.cursor=\'pointer\';" OnMouseOut="this.style.cursor=\'default\';">Old photographs </div>';
  mainMenu.appendChild(mainMenuPhotosSelected);
    
   greyBar2 = document.createElement('div');
   greyBar2.style.backgroundColor = '#4D4D4D';
   greyBar2.style.height='1px';
   greyBar2.style.marginTop='0px';
   greyBar2.style.marginBottom='0px';
   greyBar2.style.marginLeft='32px';
   greyBar2.style.marginRight='35px';
   greyBar2.style.marginTop='15px';
   greyBar2.style.marginBottom='10px';
   greyBar2.style.paddingLeft='0px';
   greyBar2.style.paddingRight='0px';
   greyBar2.style.color='#ffffff';
   mainMenu.appendChild(greyBar2);
 
    //About
  
    mainMenuAbout = document.createElement('div');
    mainMenuAbout.style.display='block';
    mainMenuAbout.style.fontFamily='Georgia, serif';
    mainMenuAbout.style.fontSize='16px';
	mainMenuAbout.style.paddingLeft='32px';
    mainMenuAbout.style.height='37px';
    mainMenuAbout.innerHTML = '<div style="padding-top:10px; height:37px; font-family:Georgia, serif; font-size:16px;" id="menu_old_map" onClick="changeMap(\'aboutMap\')" OnMouseOver="this.style.cursor=\'pointer\';" OnMouseOut="this.style.cursor=\'default\';"> About this map </div>';
    mainMenu.appendChild(mainMenuAbout); 
  
  controlUI1.appendChild(mainMenu);

  //Reset map ----------------- 
   blueBar = document.createElement('div');
   blueBar.style.backgroundColor = '#b3cde6';
   blueBar.style.height='34px';
   blueBar.style.marginTop='0px';
   blueBar.style.marginBottom='0px';
   blueBar.style.marginLeft='0px';
   blueBar.style.marginRight='0px';
   blueBar.style.paddingTop='2px';
   blueBar.style.paddingBottom='2px';
   blueBar.style.paddingLeft='60px';
   blueBar.style.paddingRight='0px';
   blueBar.style.paddingTop='5px';
   blueBar.style.color='#ffffff';
   blueBar.style.fontFamily='Georgia, serif';
   blueBar.style.fontSize='22px';
   blueBar.innerHTML = '<div style="padding-top:0px; padding-left: 35px; height:29px; font-family:Georgia, serif; font-size:22px; background-image:url(http://portsmouthhistory.co.uk/pics/template_images/mockup6_refresh.png); background-position:left top; background-repeat:no-repeat" onClick="changeMap(\'reset\')" OnMouseOver="this.style.cursor=\'pointer\';" OnMouseOut="this.style.cursor=\'default\';"> Reset</div>';
   controlUI1.appendChild(blueBar);

}

function TopBarTitleModern (topBarTitleModernDiv, map){
  /*"use strict";*/ 
  topBarTitleModernDiv.style.padding = '0px';
  controlUIm2 = document.createElement('div');
  controlUIm2.style.backgroundColor = '#b3cde6';
  controlUIm2.style.border='2px solid white';
  controlUIm2.style.borderRadius='10px';
  controlUIm2.style.margin='8px';
  controlUIm2.style.paddingTop='3px';
  controlUIm2.style.paddingLeft='4px';
  controlUIm2.style.width='223px';
  controlUIm2.style.height='41px';
  controlUIm2.style.textAlign = 'left';
  topBarTitleModernDiv.appendChild(controlUIm2);
  controlTextm2 = document.createElement('div');
  controlTextm2.style.fontFamily='Arial,sans-serif';
  controlTextm2.style.fontSize='14px';
  controlTextm2.style.paddingLeft = '4px';
  controlTextm2.style.paddingRight = '4px';
  controlTextm2.innerHTML = '<img src="http://portsmouthhistory.co.uk/pics/template_images/mockup3_modern_map.jpg" width="213" height="38" border="0"/>';
  controlUIm2.appendChild(controlTextm2);
}

function TopBarTitleOldMap (topBarTitleOldMapDiv, map){
  /*"use strict";*/ 
  topBarTitleOldMapDiv.style.padding = '0px';
  controlUIm3 = document.createElement('div');
  controlUIm3.style.backgroundColor = '#b3cde6';
  controlUIm3.style.border='2px solid white';
  controlUIm3.style.borderRadius='10px';
  controlUIm3.style.margin='8px';
  controlUIm3.style.paddingTop='3px';
  controlUIm3.style.paddingLeft='4px';
  controlUIm3.style.width='195px';
  controlUIm3.style.height='41px';
  controlUIm3.style.textAlign = 'left';
  topBarTitleOldMapDiv.appendChild(controlUIm3);
  controlTextm3 = document.createElement('div');
  controlTextm3.style.fontFamily='Arial,sans-serif';
  controlTextm3.style.fontSize='14px';
  controlTextm3.style.paddingLeft = '4px';
  controlTextm3.style.paddingRight = '4px';
  controlTextm3.innerHTML = '<img src="http://portsmouthhistory.co.uk/pics/template_images/mockup3_1896_map.jpg" width="183" height="38" border="0"/>';
  controlUIm3.appendChild(controlTextm3);
}

function TopBarTitleAbout (topBarTitleAboutDiv, map){
  /*"use strict";*/ 
  topBarTitleAboutDiv.style.padding = '0px';
  controlUIm4 = document.createElement('div');
  controlUIm4.style.backgroundColor = '#ffffff';
  controlUIm4.style.boxShadow = '2px 2px 4px #666';
  controlUIm4.style.border='2px solid #F2F2F2';
  controlUIm4.style.borderRadius='10px';
  controlUIm4.style.margin='8px';
  controlUIm4.style.paddingTop='15px';
  controlUIm4.style.paddingLeft='10px';
  controlUIm4.style.width='640px';
  controlUIm4.style.height='550px';
  controlUIm4.style.textAlign = 'left';
  topBarTitleAboutDiv.appendChild(controlUIm4);
  controlTextm4 = document.createElement('div');
  controlTextm4.style.fontFamily='Georgia, serif';
  controlTextm4.style.fontSize='16px';
  controlTextm4.style.lineHeight='24px';
  controlTextm4.style.paddingLeft = '10px';
  controlTextm4.style.paddingRight = '10px';
  controlTextm4.innerHTML = '<p>Hello,</p><p>I enjoy building stuff, and I&#39;m creating this map to try out new technologies before using them elsewhere. This website is not for work (I&#39;m a web developer at Portsmouth Uni), though I guess what I learn may come in handy. </p><p>I&#39;m not sure who the map&#39;s aimed at, or what it&#39;ll evolve into! At the moment it&#39;s kind of historian-meets-day-tripper. But this may change ... </p><p>With regards to the images, the modern ones are ones  I&#39;ve taken, unless otherwise stated.  The older images are, to my best knowledge, acceptable to use and the 1896 map is <a style="font-family:Georgia, serif; font-size:16px;" href="http://www.ordnancesurvey.co.uk/oswebsite/licensing/copyright/crown-copyright.html" target="_blank">cleared</a>.  Please don&#39;t hesitate to get in touch with any questions (emily.bennett@port.ac.uk).</p><p>There are many better websites around. And yes - this website shamelessly focuses on the famous bits of Portsmouth&#39;s history! But my aim is really just to experiment with presenting things in a more visual way. So for the time being, I&#39;m not too worried :) </p><p>If this map doesn&#39;t quite look right, you probably need to <a style="font-family:Georgia, serif; font-size:16px;" href="http://whatbrowser.org/" target="_blank">update your browser.</a> </p><p>Emily </p> <div style="padding-top:3px; margin-top:15px; height:37px; width:97%; border-top:1px; border-top-style:solid;" align="right" onClick="closeAbout()" OnMouseOver="this.style.cursor=\'pointer\';" OnMouseOut="this.style.cursor=\'default\';" > <p>Close window</p></div>';
  controlUIm4.appendChild(controlTextm4); 
}

//When the 'about' box close, the label in the top-left returns to correct label for the layer currently selected.
function closeAbout (){
	/*"use strict";*/ 
	map.controls[google.maps.ControlPosition.TOP_LEFT].clear();
	if (old_map_set === 0){
			map.controls[google.maps.ControlPosition.TOP_LEFT].push(topBarTitleModernDiv);
	}
	else {
		map.controls[google.maps.ControlPosition.TOP_LEFT].push(topBarTitleOldMapDiv);
	}
	
}


//Function that controls what happens on the map when buttons (ie. in the buttons right-hand pannel) in the side bar are clicked ----------------------------------
function changeMap(selectedMap){  
/*"use strict";*/ 
welcomeMessageHide();

var length = map.controls[google.maps.ControlPosition.RIGHT_TOP].getLength();

	   //Deals with the 'Reset Map' button being clicked OR if Historic (ie sketched map) has been clicked 
	   if (selectedMap === "reset"){
		    /*loading_div.style.display = 'block';*/
		    map.setCenter(mainLatLng);
			map.setZoom(14);
			closeAllBubbles();
			showPeopleMarkers();
			removeImages();
			if (old_map_set === 0){
					map.overlayMapTypes.insertAt(0, oldMapOverlay);
					old_map_set = 1;
			}
			map.setOptions(mapOptionsModern);	
			map.setMapTypeId('map_styles_modern');
			
			mainMenuModernUnselected.style.display='block';
			mainMenuModernSelected.style.display='none';
			mainMenuOldUnselected.style.display='none';
			mainMenuOldSelected.style.display='block';
			mainMenuPeopleUnselected.style.display='none';
			mainMenuPeopleSelected.style.display='block';			
			mainMenuPhotosUnselected.style.display='block';
			mainMenuPhotosSelected.style.display='none';
			map.controls[google.maps.ControlPosition.TOP_LEFT].clear();
			map.controls[google.maps.ControlPosition.TOP_LEFT].push(topBarTitleOldMapDiv);
			welcomeMessageShow();
			resetZindexs ();
			makeAllClickable();
			/*setTimeout (function(){loading_div.style.display = 'none';}, 600 );*/
	   }	
	      
		//Deals with the modern map being selected  
    	else if (selectedMap === "modern"){
			if (old_map_set === 1){
				map.overlayMapTypes.removeAt(0, oldMapOverlay);
				old_map_set = 0;
			}	
			mainMenuModernUnselected.style.display='none';
			mainMenuModernSelected.style.display='block';
			mainMenuOldUnselected.style.display='block';
			mainMenuOldSelected.style.display='none';
			map.controls[google.maps.ControlPosition.TOP_LEFT].clear();
			map.controls[google.maps.ControlPosition.TOP_LEFT].push(topBarTitleModernDiv);
		}	
		
		//Deals with the old 1896 overlay map being selected  
		else if (selectedMap === "old_map"){
			if (old_map_set === 0){
					map.overlayMapTypes.insertAt(0, oldMapOverlay);
					old_map_set = 1;
			}	
			mainMenuModernUnselected.style.display='block';
			mainMenuModernSelected.style.display='none';
			mainMenuOldUnselected.style.display='none';
			mainMenuOldSelected.style.display='block';
			map.controls[google.maps.ControlPosition.TOP_LEFT].clear();
			map.controls[google.maps.ControlPosition.TOP_LEFT].push(topBarTitleOldMapDiv);
		}	
		
		else if (selectedMap === "close_images"){
			for (var i=0;i<ib.length;i++) {
				ib[i].close();
			}
			for (var ii=0;ii<imageMarker.length;ii++) {
				imageMarker[ii].setIcon(iconURL);	
			}
		}
		
		else if (selectedMap === "peopleShow"){
			showPeopleMarkers();
			mainMenuPeopleUnselected.style.display='none';
			mainMenuPeopleSelected.style.display='block';		
		}
		
		else if (selectedMap === "peopleHide"){
			closeAllBubbles();
			removePeopleMarkers();
			mainMenuPeopleUnselected.style.display='block';
			mainMenuPeopleSelected.style.display='none';		
		}
		
		else if (selectedMap === "photosShow"){
			alert("PLEASE WAIT - There are over 200 pictures. ");
			mainMenuPhotosUnselected.style.display='none';
			mainMenuPhotosSelected.style.display='block';
			overlay.show();
	        addPhotos();
		}
		
		else if (selectedMap === "photosHide"){
			mainMenuPhotosUnselected.style.display='block';
			mainMenuPhotosSelected.style.display='none';		
			removeImages();	
		}
	
		else if (selectedMap === "aboutMap"){
			map.controls[google.maps.ControlPosition.TOP_LEFT].clear();
			map.controls[google.maps.ControlPosition.TOP_LEFT].push(topBarTitleAboutDiv);
		}
}

function showPortsmouthMarkersZoomedOut(){
/*"use strict";*/ 
		markerHGWells.setIcon(iconHGWells);  
		markerJohnPounds.setIcon(iconJohnPounds); 
		markerConanDoyle.setIcon(iconConanDoyle); 
		markerSSPLable.setIcon(iconSSPLable);  
		markerBaffins.setIcon(iconBaffins);  
		markerHolbrooke.setIcon(iconHolbrooke);  
		markerUnwin.setIcon(iconUnwin); 
		markerEllis.setIcon(iconEllis); 
		markerKipling.setIcon(iconKipling); 
		markerEllen.setIcon(iconEllen); 
		markerBrunel.setIcon(iconBrunel); 
		markerCityMuseum.setIcon(iconCityMuseum);
		markerWindmill.setIcon(iconWindmill);
		markerGunwarf.setIcon(iconGunwarf);
		markerTrain.setIcon(iconTrain);
		markerCanoe.setIcon(iconCanoe);
		
		markerHGWells.setShape(shapeHGWells);  
		markerJohnPounds.setShape(shapeJohnPounds); 
		markerConanDoyle.setShape(shapeConanDoyle); 
		markerSSPLable.setShape(shapeSSPLable);  
		markerBaffins.setShape(shapeBaffins);   
		markerHolbrooke.setShape(shapeHolbrooke);  
		markerUnwin.setShape(shapeUnwin); 
		markerEllis.setShape(shapeEllis); 
		markerKipling.setShape(shapeKipling); 
		markerEllen.setShape(shapeEllen); 
		markerBrunel.setShape(shapeBrunel); 
		markerCityMuseum.setShape(shapeCityMuseum);
		markerWindmill.setShape(shapeWindmill);
		markerGunwarf.setShape(shapeGunwarf);
		markerTrain.setShape(shapeTrain);
		markerCanoe.setShape(shapeCanoe);
		if (peopleHidden === 0){
			markerDock.setVisible (true); 
			markerDockZoomed.setVisible (false); 
		}
}

function showPortsmouthMarkersZoomedIn(){
		/*"use strict";*/ 
		markerHGWells.setIcon(iconHGWellsZoomed);  
		markerJohnPounds.setIcon(iconJohnPoundsZoomed); 
		markerConanDoyle.setIcon(iconConanDoyleZoomed); 
		markerSSPLable.setIcon(iconSSPLableZoomed);  
		markerBaffins.setIcon(iconBaffinsZoomed);   
		markerHolbrooke.setIcon(iconHolbrookeZoomed);  
		markerUnwin.setIcon(iconUnwinZoomed); 
		markerEllis.setIcon(iconEllisZoomed); 
		markerKipling.setIcon(iconKiplingZoomed); 
		markerEllen.setIcon(iconEllenZoomed); 
		markerBrunel.setIcon(iconBrunelZoomed); 
		markerCityMuseum.setIcon(iconCityMuseumZoomed); 
		markerWindmill.setIcon(iconWindmillZoomed); 
		markerGunwarf.setIcon(iconGunwarfZoomed);
		markerTrain.setIcon(iconTrainZoomed);
		markerCanoe.setIcon(iconCanoeZoomed);  
		
		markerHGWells.setShape(shapeHGWellsZoomed);  
		markerJohnPounds.setShape(shapeJohnPoundsZoomed ); 
		markerConanDoyle.setShape(shapeConanDoyleZoomed); 
		markerSSPLable.setShape(shapeSSPLableZoomed);  
		markerBaffins.setShape(shapeBaffinsZoomed);   
		markerHolbrooke.setShape(shapeHolbrookeZoomed);  
		markerUnwin.setShape(shapeUnwinZoomed); 
		markerEllis.setShape(shapeEllisZoomed ); 
		markerKipling.setShape(shapeKiplingZoomed); 
		markerEllen.setShape(shapeEllenZoomed); 
		markerBrunel.setShape(shapeBrunelZoomed); 
		markerCityMuseum.setShape(shapeCityMuseumZoomed);
		markerWindmill.setShape(shapeWindmillZoomed);
		markerGunwarf.setShape(shapeGunwarfZoomed);
		markerTrain.setShape(shapeTrainZoomed);
		markerCanoe.setShape(shapeCanoeZoomed);
		if (peopleHidden === 0){
			markerDock.setVisible (false); 
			markerDockZoomed.setVisible (true); 
		}
}

//Reads the photos from flickr into the array
function addPhotos(){	
/*"use strict";*/ 
$.getJSON("http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=f1b5a1d74663b5c1f48240d06bb336a4&user_id=93146611@N08&lat=50.789887&radius=5&has_geo=1&extras=geo,original_format&format=json&jsoncallback=?", displayImages );
	
}

//Function that loops through all photos.
function displayImages(data){
/*"use strict";*/ 
//loop through the results with the following function the 'data.photos.photo' bit is what you want from the json array
                    $.each(data.photos.photo, function(i,item){
					mylat[i] = item.latitude;
					mylong[i] = item.longitude;
					//so can display under each photo
					photoTitle[i] = item.title;
					saveWidthArray[i] = item.id;
					secretKey = item.originalsecret;	
					//gets the url for the image
					photoURL[i] = 'http://farm' + item.farm + '.static.flickr.com/' + item.server + '/' + item.id + '_' + secretKey + '_o.jpg';							
					var myLatlngMarker = new google.maps.LatLng(mylat[i],mylong[i]);
					imageMarker[i] = new google.maps.Marker({
   					position: myLatlngMarker,
     				map: map,
     				title: "Photo",
					icon: iconURL
					});
					
					google.maps.event.addListener(imageMarker[i], "click", function (e) {
						/*setZoomWhenMarkerClicked();*/
						closeAllBubbles();
						closeCurrentImage();
						if (mobileOrNot === "true"){			
							makeAllPhotosUnClickable();
						}					
						//changing marker icon when clicked
						imageMarker[i].setIcon(iconURLclicked);
						//making marker icon come to the front when clicked
						this.setZIndex(google.maps.Marker.MAX_ZINDEX + 1);	
						//calling the Infobox external javascript plugin file to create the pop-up infobox containing the photo	
						currentImage = i;
						createAndOpenPhotoBox ();
						
					});	
		});	
		overlay.hide();
		/*alert(saveWidthArray.length);*/	
		if (widthread === 0){
		widthread = 1;
		saveWidth ();
		}
}

//The following 2 functions save the width of each photo into an array. This is useful as it means the programes doesn't need to create all the infoboxes in one go. (I tried this orignally but it slowed down the map too much on iPads etc).
function saveWidth (){
/*"use strict";*/ 

var photo_id = saveWidthArray[frog];
/*alert(photo_id);*/
var jsonRequest = "http://api.flickr.com/services/rest/?method=flickr.photos.getSizes&api_key=f1b5a1d74663b5c1f48240d06bb336a4&user_id=93146611@N08&photo_id=" + photo_id + "&format=json&jsoncallback=?";
/*alert (jsonRequest);*/
$.getJSON(jsonRequest, saveWidthsProcess);
}

function saveWidthsProcess (data){
/*"use strict";*/ 
$.each(data.sizes.size, function(i, item){									
       					 if (item.label === "Original" ){
							 /*alert(picWidthCounter);*/
							 
							 /*alert(item.width);*/
							 
							 var kitten = item.width;
							 /*alert(kitten);*/
							 
							 photoWidth[picWidthCounter] = 888;
							 /*alert(photoWidth[picWidthCounter]);*/
							 
							 photoWidth[picWidthCounter] = kitten;
							 /*alert(photoWidth[picWidthCounter]);*/
							 
							 picWidthCounter = picWidthCounter + 1;
							 
							 /*alert("frog15");*/
						 } 
      				});	
frog = frog+1;
if (frog != saveWidthArray.length){
saveWidth();
}				
}

//Create photobox when a old photo marker is clicked.
function createAndOpenPhotoBox () {
/*"use strict";*/ 
htmlString = '<p class="pop_up_box_text">' + photoTitle[currentImage] + '</p><img src="' + photoURL[currentImage] + '"  >' ;	
	boxText.innerHTML = htmlString;
	boxText.style.cssText = "border: 0px solid black; background: rgba(0, 0, 0, 0.7); padding:15px; margin-top: 8px; border-radius:10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; ";	
	/*alert (currentImage);*/
    var widthTemp = photoWidth [currentImage];
	
	widthTemp2 = widthTemp;
	/*alert (widthTemp2);*/
	if (widthTemp === undefined){
		widthTemp2 = 730;
	}
	else {
	widthTemp2 = parseInt(widthTemp2, 10) + 30;
	}
	setTimeout(createAndOpenPhotoBoxStart, 100);
}

function createAndOpenPhotoBoxStart () {
/*"use strict";*/ 
var widthTemp3 = widthTemp2+"px";
/*alert (widthTemp3);*/

var myOptions = {
					 content: boxText
					 //This is the bit (2 lines)I have changed.
					,disableAutoPan: true
					,position: new google.maps.LatLng(mylat[currentImage],mylong[currentImage])
					,maxWidth: 0
					,pixelOffset: new google.maps.Size(-243, 0)
					,zIndex: null
					,boxStyle: { 
					  background: "url('http://portsmouthhistory.co.uk/pics/template_images/pop_up_box_top_arrow.png') no-repeat", 
					  width : widthTemp3
				   }
					,closeBoxMargin: "10px 2px 2px 2px"
					,closeBoxURL: "http://portsmouthhistory.co.uk/pics/template_images/pop_up_box_close_button.png"
					,infoBoxClearance: new google.maps.Size(1, 1)
					,isHidden: false
					,pane: "floatPane"
					,enableEventPropagation: false
	};		
	ib = new InfoBoxPhotos(myOptions);
	ib.open(map, imageMarker[currentImage], this);
	firstImageOpen = 1;
}
 
//This function removes photo markers and any open infoboxes.
function removeImages(){
/*"use strict";*/ 
for (var i=0;i<imageMarker.length;i++) {
	imageMarker[i].setMap(null);	
	}
	if (firstImageOpen === 1){
	ib.close();
	}
}

function makeAllPhotosClickable(){
/*"use strict";*/ 
for (var i=0;i<imageMarker.length;i++) {
		imageMarker[i].setClickable(true);	
	}
}

function makeAllPhotosUnClickable(){
/*"use strict";*/ 
for (var i=0;i<imageMarker.length;i++) {
		imageMarker[i].setClickable(false);	
	}
}

function regClose (){
/*"use strict";*/ 
currentImage = "none";
}

function closeOpenImages (){
/*"use strict";*/ 
for (var i=0;i<ib.length;i++) {
		ib[i].close();
	}
}

function closeCurrentImage (){
/*"use strict";*/ 
if (currentImage !== "none"){
							ib.close();
							replaceImageMarker (currentImage);
							currentImage = "none";
     		}
}

//This function will close all the infoboxes. 
function closeAllBubbles(){
/*"use strict";*/ 
			infoboxDockyard.close();
			infoboxPoint.close();
			infoboxMaryRose.close();
			infoboxWarrior.close();
			infoboxSeafort.close();
			infoboxSouthseaCastle.close();
			infoboxCityMuseum.close();
			infoboxHGWells.close();
			infoboxJohnPounds.close();
			infoboxConanDoyle.close();
			infoboxDday.close();
			infoboxMarines.close();
			infoboxSSPLable.close();
			infoboxBaffins.close();
			infoboxHolbrooke.close();
			infoboxUnwin.close();
			infoboxEllis.close();
			infoboxKipling.close();
			infoboxEllen.close();
			infoboxBlitz.close();
			infoboxBrunel.close();
			infoboxNelson.close();
			infoboxDickens.close();
			infoboxHillFort.close();
			infoboxCastle.close();
			infoboxHarbour.close();
			infoboxWindmill.close();
			infoboxDock.close();
			infoboxGunwarf.close();
			infoboxTrain.close();
			infoboxCanoe.close();
			resetZindexs ();
}

//Remove all people markers
function removePeopleMarkers() {
/*"use strict";*/ 
peopleHidden = 1;	
markerDockyard.setVisible (false);
markerPoint.setVisible (false); 
markerMaryRose.setVisible (false); 
markerWarrior.setVisible (false); 
markerSeafort.setVisible (false); 
markerSouthseaCastle.setVisible (false); 
markerCityMuseum.setVisible (false); 
markerHGWells.setVisible (false); 
markerJohnPounds.setVisible (false); 
markerConanDoyle.setVisible (false); 
markerDday.setVisible (false); 
markerMarines.setVisible (false); 
markerSSPLable.setVisible (false); 
markerBaffins.setVisible (false); 
markerHolbrooke.setVisible (false); 
markerUnwin.setVisible (false); 
markerEllis.setVisible (false); 
markerKipling.setVisible (false); 
markerEllen.setVisible (false); 
markerBlitz.setVisible (false); 
markerBrunel.setVisible (false); 
markerNelson.setVisible (false); 
markerDickens.setVisible (false); 
markerHillFort.setVisible (false); 
markerHillFortLable.setVisible (false); 
markerCastle.setVisible (false); 
markerCastleLable.setVisible (false); 
markerLabelHarbour.setVisible (false); 
markerWindmill.setVisible (false); 	
markerDock.setVisible (false); 	
markerDockZoomed.setVisible (false); 
markerGunwarf.setVisible (false); 	
markerTrain.setVisible (false); 	
markerCanoe.setVisible (false); 	
}

function showPeopleMarkers() {
	/*"use strict";*/ 
	peopleHidden = 0;	
markerDockyard.setVisible (true);
markerPoint.setVisible (true); 
markerMaryRose.setVisible (true); 
markerWarrior.setVisible (true); 
markerSeafort.setVisible (true); 
markerSouthseaCastle.setVisible (true); 
markerCityMuseum.setVisible (true); 
markerHGWells.setVisible (true); 
markerJohnPounds.setVisible (true); 
markerConanDoyle.setVisible (true); 
markerDday.setVisible (true); 
markerMarines.setVisible (true); 
markerSSPLable.setVisible (true); 
markerBaffins.setVisible (true); 
markerHolbrooke.setVisible (true); 
markerUnwin.setVisible (true); 
markerEllis.setVisible (true); 
markerKipling.setVisible (true); 
markerEllen.setVisible (true); 
markerBlitz.setVisible (true); 
markerBrunel.setVisible (true); 
markerNelson.setVisible (true); 
markerDickens.setVisible (true); 
markerHillFort.setVisible (true); 
markerHillFortLable.setVisible (true); 
markerCastle.setVisible (true); 
markerCastleLable.setVisible (true); 
markerLabelHarbour.setVisible (true); 
markerWindmill.setVisible (true); 
markerGunwarf.setVisible (true);
markerCanoe.setVisible (true);
markerTrain.setVisible (true); 
	var newZoom2 = map.getZoom();
	if (newZoom2 < 15){
			markerDock.setVisible (true); 
		}
		else {
			markerDockZoomed.setVisible (true); 
		}
}



//FUNCTION THAT LOADS ALL THE INFORMATION RELATING TO THE PEOPLE AND PLACES MARKERS
function loadHistoricData (){
	/*"use strict";*/

//HISTORIC DOCKYARD - click on the icon of the victory to zoom in and see more markers ------------------

iconDockyardLatLng = new google.maps.LatLng(50.801690, -1.109533);
zoomDockyardLatLng = new google.maps.LatLng(50.800950, -1.084771);

markerDockyard = new google.maps.Marker({
    position: iconDockyardLatLng,
    map: map,
    title: 'HMS Victory',
	icon: iconDockyard,
	zIndex:903,
	shape: shapeDockyard
});

var myOptionsInfoboxDockyard = {
					 content: contentDockyard
					 //This is the bit (2 lines)I have changed.
					,disableAutoPan: true
					,position: iconDockyardLatLng
					,maxWidth: 0
					,pixelOffset: new google.maps.Size(-240, 0)
					,zIndex: null
					,boxStyle: { 
					  background: "url('http://portsmouthhistory.co.uk/pics/template_images/pop_up_box_top_arrow.png') no-repeat"
						  ,width: "500px", height:"800px"
				   }
					,closeBoxMargin: "10px 2px 2px 2px"
					,closeBoxURL: "http://portsmouthhistory.co.uk/pics/template_images/pop_up_box_close_button.png"
					,infoBoxClearance: new google.maps.Size(1, 1)
					,isHidden: false
					,pane: "floatPane"
					,enableEventPropagation: false
};

infoboxDockyard = new InfoBox(myOptionsInfoboxDockyard);

google.maps.event.addListener(markerDockyard, "click", function (e) {
			contentDockyard.innerHTML = '<h1>HMS Victory</h1><p class="pop_up_box_text"> - Flagship of Admiral Lord Nelson at the Battle of Trafalgar in 1805.</p><div id="victory_startslider" onClick="startSlider(\'victory_startslider\', \'info_victory\')" OnMouseOver="this.style.cursor=\'pointer\';" OnMouseOut="this.style.cursor=\'default\';"><img src="http://portsmouthhistory.co.uk/pics/info_box_content/victory/my_nivo/demo/images/hms_victory_start-01.jpg" width="470" height="348" border="0" alt="HMS Victory"/></div><div id="info_victory" style="display:none" ><iframe src="http://portsmouthhistory.co.uk/pics/info_box_content/victory/my_nivo/demo/demo.php" width="470" height="348" frameborder="0" scrolling="no"></iframe></div><p class="pop_up_box_text_smaller">(Once started, pictures change automatically on iPads etc).</p>';
			/*loading_div.style.display = 'block';*/
	        closeAllBubbles();
			closeCurrentImage();
			infoboxDockyard.open(map, this);
			this.setZIndex(google.maps.Marker.MAX_ZINDEX + 1);
			setZoomWhenMarkerClicked();
			/*map.setCenter(markerDockyard.getPosition());*/
			var currentZoom = map.getZoom();
			if (currentZoom <= 15){infoboxDockyardLatLng = new google.maps.LatLng(50.794972, -1.109533);}
			else if (currentZoom == 16){infoboxDockyardLatLng = new google.maps.LatLng(50.798813, -1.109533);}
			else if (currentZoom == 17){infoboxDockyardLatLng = new google.maps.LatLng(50.799973, -1.109533);}
			else if (currentZoom == 18){infoboxDockyardLatLng = new google.maps.LatLng(50.800957, -1.109533);}
			map.setCenter(infoboxDockyardLatLng);
			welcomeMessageHide();
			if (mobileOrNot === "true"){			
				makeAllUnClickable();
			makeAllPhotosUnClickable();
			}
			/*setTimeout (function(){loading_div.style.display = 'none';}, 600 );*/
});

//THE POINT -------------------
iconPointLatLng = new google.maps.LatLng(50.792413, -1.108814);

markerPoint = new google.maps.Marker({
    position: iconPointLatLng,
    map: map,
    title: 'The Point',
	icon: iconPoint,
	zIndex:907,
	shape: shapePoint
});

var myOptionsInfoboxPoint = {
					 content: contentPoint
					 //This is the bit (2 lines)I have changed.
					,disableAutoPan: true
					,position: iconPointLatLng
					,maxWidth: 0
					,pixelOffset: new google.maps.Size(-241, 0)
					,zIndex: null
					,boxStyle: { 
					  background: "url('http://portsmouthhistory.co.uk/pics/template_images/pop_up_box_top_arrow.png') no-repeat"
						  ,width: "500px"
				   }
					,closeBoxMargin: "10px 2px 2px 2px"
					,closeBoxURL: "http://portsmouthhistory.co.uk/pics/template_images/pop_up_box_close_button.png"
					,infoBoxClearance: new google.maps.Size(1, 1)
					,isHidden: false
					,pane: "floatPane"
					,enableEventPropagation: false
};

infoboxPoint = new InfoBox(myOptionsInfoboxPoint);
google.maps.event.addListener(markerPoint, "click", function (e) {
			contentPoint.innerHTML = '<h1>The Point</h1><p class="pop_up_box_text"> - Good pubs and restaurants.</p><div id="point_startslider" onClick="startSlider(\'point_startslider\', \'info_point\')" OnMouseOver="this.style.cursor=\'pointer\';" OnMouseOut="this.style.cursor=\'default\';"><img src="http://portsmouthhistory.co.uk/pics/info_box_content/the_point/my_nivo/demo/images/the_point_portsmouth_start-01.jpg" width="470" height="367" border="0" alt="Portsmouth Point"/></div><div id="info_point" style="display:none" ><iframe src="http://portsmouthhistory.co.uk/pics/info_box_content/the_point/my_nivo/demo/demo.php" width="470" height="367" frameborder="0" scrolling="no"></iframe></div><p class="pop_up_box_text_smaller">(Once started, pictures change automatically on iPads etc).</p>';
			/*loading_div.style.display = 'block';*/
 	        closeAllBubbles();
			closeCurrentImage();
			infoboxPoint.open(map, this);
			this.setZIndex(google.maps.Marker.MAX_ZINDEX + 1);
			setZoomWhenMarkerClicked();
			/*map.setCenter(markerPoint.getPosition());*/
			var currentZoom = map.getZoom();
			if (currentZoom <= 15){infoboxPointLatLng = new google.maps.LatLng(50.785832, -1.108814);}
			else if (currentZoom == 16){infoboxPointLatLng = new google.maps.LatLng(50.789177, -1.108814);}
			else if (currentZoom == 17){infoboxPointLatLng = new google.maps.LatLng(50.790819, -1.108814);}
			else if (currentZoom == 18){infoboxPointLatLng = new google.maps.LatLng(50.791619, -1.108814);}
			map.setCenter(infoboxPointLatLng);
			welcomeMessageHide();
			if (mobileOrNot === "true"){			
				makeAllUnClickable();
				makeAllPhotosUnClickable();
			}
			/*setTimeout (function(){loading_div.style.display = 'none';}, 600 );*/
});

// MARY ROSE -------------------

iconMaryRoseLatLng = new google.maps.LatLng(50.783772, -1.111636);

markerMaryRose = new google.maps.Marker({
    position: iconMaryRoseLatLng,
    map: map,
    title: 'The Mary Rose',
	icon: iconMaryRose,
	zIndex:909,
	shape: shapeMaryRose
});

var myOptionsInfoboxMaryRose = {
					 content: contentMaryRose
					 //This is the bit (2 lines)I have changed.
					,disableAutoPan: true
					,position: iconMaryRoseLatLng
					,maxWidth: 0
					,pixelOffset: new google.maps.Size(-243, 0)
					,zIndex: null
					,boxStyle: { 
					  background: "url('http://portsmouthhistory.co.uk/pics/template_images/pop_up_box_top_arrow.png') no-repeat"
						  ,width: "500px"
				   }
					,closeBoxMargin: "10px 2px 2px 2px"
					,closeBoxURL: "http://portsmouthhistory.co.uk/pics/template_images/pop_up_box_close_button.png"
					,infoBoxClearance: new google.maps.Size(1, 1)
					,isHidden: false
					,pane: "floatPane"
					,enableEventPropagation: false
};

infoboxMaryRose = new InfoBox(myOptionsInfoboxMaryRose);

google.maps.event.addListener(markerMaryRose, "click", function (e) {
	// NOT USING THIS BIT AT THE MOMENT AS THE VIDEO SEEMS TO STOP THE MAP
	//Test for Internet Explorer
			//if (/MSIE\s([\d.]+)/.test(navigator.userAgent)) {
    		//Get the IE version.  This will be 6 for IE6, 7 for IE7, etc...
   			// version = new Number(RegExp.$1);
			// contentMaryRose.innerHTML = '<span class="pop_up_box_text">The Mary Rose sank in battle in the Solent in 1545. She sank a little further East than this marker suggests. </span><p>&nbsp;</p><div id="maryrose_startslider" onClick="startSlider(\'maryrose_startslider\', \'info_maryrose\')" OnMouseOver="this.style.cursor=\'pointer\';" OnMouseOut="this.style.cursor=\'default\';"><img src="http://portsmouthhistory.co.uk/pics/info_box_content/mary_rose/my_nivo/demo/images/henry_8th_start.jpg" width="470" height="299" border="0" /></div><div id="info_maryrose" style="display:none" ><iframe src="http://portsmouthhistory.co.uk/pics/info_box_content/mary_rose/my_nivo/demo/demo.php" width="470" height="299" frameborder="0" scrolling="no"></iframe></div>';
		//	}
		//	else {
		//	contentMaryRose.innerHTML = '<span class="pop_up_box_text">The Mary Rose sank in battle in the Solent in 1545. She sank a little further East than this marker suggests. </span><p>&nbsp;</p><iframe id="VideoPlayerMaryRose" width="470" height="225" src="http://www.youtube.com/embed/QeSkWg_y8z0?rel=0" frameborder="0" allowfullscreen></iframe><span class="pop_up_box_text">She can be visited at Portsmouth Historic Dockyard.</span>';
		//	}
		
			contentMaryRose.innerHTML = '<h1>The Mary Rose</h1><p class="pop_up_box_text"> - The Mary Rose sank in battle in the Solent in 1545. She sank a little further East than this marker suggests. </p><div id="maryrose_startslider" onClick="startSlider(\'maryrose_startslider\', \'info_maryrose\')" OnMouseOver="this.style.cursor=\'pointer\';" OnMouseOut="this.style.cursor=\'default\';"><img src="http://portsmouthhistory.co.uk/pics/info_box_content/mary_rose/my_nivo/demo/images/henry_8th_start.jpg" width="470" height="299" border="0" alt="The Mary Rose"/></div><div id="info_maryrose" style="display:none" ><iframe src="http://portsmouthhistory.co.uk/pics/info_box_content/mary_rose/my_nivo/demo/demo.php" width="470" height="299" frameborder="0" scrolling="no"></iframe></div><p class="pop_up_box_text_smaller">(Once started, pictures change automatically on iPads etc).</p>';
		
			/*loading_div.style.display = 'block';*/	
			closeAllBubbles();
			closeCurrentImage();
			infoboxMaryRose.open(map, this);
			this.setZIndex(google.maps.Marker.MAX_ZINDEX + 1);
			setZoomWhenMarkerClicked();
			/*map.setCenter(markerMaryRose.getPosition());*/
			var currentZoom = map.getZoom();
			if (currentZoom <= 15){infoboxMaryRoseLatLng = new google.maps.LatLng(50.778363, -1.111636);}
			else if (currentZoom == 16){infoboxMaryRoseLatLng = new google.maps.LatLng(50.780772, -1.111636);}
			else if (currentZoom == 17){infoboxMaryRoseLatLng = new google.maps.LatLng(50.782248, -1.111636);}
			else if (currentZoom == 18){infoboxMaryRoseLatLng = new google.maps.LatLng(50.782956, -1.111636);}
			map.setCenter(infoboxMaryRoseLatLng);
			welcomeMessageHide();
			if (mobileOrNot === "true"){			
				makeAllUnClickable();
			makeAllPhotosUnClickable();
			}
			/*setTimeout (function(){loading_div.style.display = 'none';}, 600 );*/
});

//WARRIOR --------------------------------------------

iconWarriorLatLng = new google.maps.LatLng(50.798307, -1.109147);

markerWarrior = new google.maps.Marker({
    position: iconWarriorLatLng,
    map: map,
    title: 'HMS Warrior',
	icon: iconWarrior, 
	zIndex:906,
	shape: shapeWarrior
});

var myOptionsInfoboxWarrior = {
					 content: contentWarrior
					 //This is the bit (2 lines)I have changed.
					,disableAutoPan: true
					,position: iconWarriorLatLng
					,maxWidth: 0
					,pixelOffset: new google.maps.Size(-241, 0)
					,zIndex: null
					,boxStyle: { 
					  background: "url('http://portsmouthhistory.co.uk/pics/template_images/pop_up_box_top_arrow.png') no-repeat"


						  ,width: "500px"
				   }
					,closeBoxMargin: "10px 2px 2px 2px"
					,closeBoxURL: "http://portsmouthhistory.co.uk/pics/template_images/pop_up_box_close_button.png"
					,infoBoxClearance: new google.maps.Size(1, 1)
					,isHidden: false
					,pane: "floatPane"
					,enableEventPropagation: false
};

infoboxWarrior = new InfoBox(myOptionsInfoboxWarrior);

google.maps.event.addListener(markerWarrior, "click", function (e) {
			contentWarrior.innerHTML = '<h1>HMS Warrior</h1><p class="pop_up_box_text"> - Go aboard HMS Warrior at Portsmouth Historic Dockyard.</p><div id="warrior_startslider" onClick="startSlider(\'warrior_startslider\', \'info_warrior\')" OnMouseOver="this.style.cursor=\'pointer\';" OnMouseOut="this.style.cursor=\'default\';"><img src="http://portsmouthhistory.co.uk/pics/info_box_content/warrior/my_nivo/demo/images/hms_warrior_start-01.jpg" width="470" height="385" border="0" alt="HMS Warrior"/></div><div id="info_warrior" style="display:none" ><iframe src="http://portsmouthhistory.co.uk/pics/info_box_content/warrior/my_nivo/demo/demo.php" width="470" height="385" frameborder="0" scrolling="no"></iframe></div><p class="pop_up_box_text_smaller">(Once started, pictures change automatically on iPads etc).</p>';
			/*loading_div.style.display = 'block';*/
	        closeAllBubbles();
			closeCurrentImage();
			infoboxWarrior.open(map, this);
			this.setZIndex(google.maps.Marker.MAX_ZINDEX + 1);
			setZoomWhenMarkerClicked();
			/*map.setCenter(markerWarrior.getPosition());*/
			var currentZoom = map.getZoom();
			if (currentZoom <= 15){infoboxWarriorLatLng = new google.maps.LatLng(50.791326, -1.109147);}
			else if (currentZoom == 16){infoboxWarriorLatLng = new google.maps.LatLng(50.794880, -1.109147);}
			else if (currentZoom == 17){infoboxWarriorLatLng = new google.maps.LatLng(50.796914, -1.109147);}
			else if (currentZoom == 18){infoboxWarriorLatLng = new google.maps.LatLng(50.797565, -1.109147);}
			map.setCenter(infoboxWarriorLatLng);
			welcomeMessageHide();
			if (mobileOrNot === "true"){			
				makeAllUnClickable();
			makeAllPhotosUnClickable();
			}
			/*setTimeout (function(){loading_div.style.display = 'none';}, 600 );*/
});

//SEA FORT -------------------

iconSeafortLatLng = new google.maps.LatLng(50.777775, -1.062584);

markerSeafort = new google.maps.Marker({
    position: iconSeafortLatLng,
    map: map,
    title: 'Sea Fort',
	icon: iconSeafort,
	zIndex:914,
	shape: shapeSeafort
});

var myOptionsInfoboxSeafort = {
					 content: contentSeafort
					 //This is the bit (2 lines)I have changed.
					,disableAutoPan: true
					,position: iconSeafortLatLng
					,maxWidth: 0
					,pixelOffset: new google.maps.Size(-241, 0)
					,zIndex: null
					,boxStyle: { 
					  background: "url('http://portsmouthhistory.co.uk/pics/template_images/pop_up_box_top_arrow.png') no-repeat"
						  ,width: "500px"
				   }
					,closeBoxMargin: "10px 2px 2px 2px"
					,closeBoxURL: "http://portsmouthhistory.co.uk/pics/template_images/pop_up_box_close_button.png"
					,infoBoxClearance: new google.maps.Size(1, 1)
					,isHidden: false
					,pane: "floatPane"
					,enableEventPropagation: false
};

infoboxSeafort = new InfoBox(myOptionsInfoboxSeafort);

google.maps.event.addListener(markerSeafort, "click", function (e) {
			contentSeafort.innerHTML = '<h1>Palmerston&#39;s forts</h1><p class="pop_up_box_text"> - Fear of a French invasion around 1860 triggered the construction of these Victorian forts. </p><div id="seafort_startslider" onClick="startSlider(\'seafort_startslider\', \'info_seafort\')" OnMouseOver="this.style.cursor=\'pointer\';" OnMouseOut="this.style.cursor=\'default\';"><img src="http://portsmouthhistory.co.uk/pics/info_box_content/sea_fort/my_nivo/demo/images/palmerstons_forts_start-01.jpg" width="470" height="273" border="0" alt="Palmerstons Forts"/></div><div id="info_seafort" style="display:none" ><iframe src="http://portsmouthhistory.co.uk/pics/info_box_content/sea_fort/my_nivo/demo/demo.php" width="470" height="273" frameborder="0" scrolling="no"></iframe></div><p class="pop_up_box_text_smaller">(Once started, pictures change automatically on iPads etc).</p>';
			/*loading_div.style.display = 'block';*/
	        closeAllBubbles();
			closeCurrentImage();
			infoboxSeafort.open(map, this);
			this.setZIndex(google.maps.Marker.MAX_ZINDEX + 1);
			setZoomWhenMarkerClicked();
			/*map.setCenter(markerSeafort.getPosition());*/
			var currentZoom = map.getZoom();
			if (currentZoom <= 15){infoboxSeafortLatLng = new google.maps.LatLng(50.772343, -1.062584);}
			else if (currentZoom == 16){infoboxSeafortLatLng = new google.maps.LatLng(50.774596, -1.062584);}
			else if (currentZoom == 17){infoboxSeafortLatLng = new google.maps.LatLng(50.776308, -1.062584);}
			else if (currentZoom == 18){infoboxSeafortLatLng = new google.maps.LatLng(50.777190, -1.062584);}
			map.setCenter(infoboxSeafortLatLng);
			welcomeMessageHide();
			if (mobileOrNot === "true"){			
				makeAllUnClickable();
				makeAllPhotosUnClickable();
			}
			/*setTimeout (function(){loading_div.style.display = 'none';}, 600 );*/
});

//SOUTHSEA CASTLE-------------------

iconSouthseaCastleLatLng = new google.maps.LatLng(50.777870, -1.087829);

markerSouthseaCastle = new google.maps.Marker({
    position: iconSouthseaCastleLatLng,
    map: map,
    title: 'Southsea Castle',
	icon: iconSouthseaCastle,
	zIndex:912,
	shape: shapeSouthseaCastle
});

var myOptionsInfoboxSouthseaCastle = {
					 content: contentSouthseaCastle
					 //This is the bit (2 lines)I have changed.
					,disableAutoPan: true
					,position: iconSouthseaCastleLatLng
					,maxWidth: 0
					,pixelOffset: new google.maps.Size(-239, 0)
					,zIndex: null
					,boxStyle: { 
					  background: "url('http://portsmouthhistory.co.uk/pics/template_images/pop_up_box_top_arrow.png') no-repeat"
						  ,width: "500px"
				   }
					,closeBoxMargin: "10px 2px 2px 2px"
					,closeBoxURL: "http://portsmouthhistory.co.uk/pics/template_images/pop_up_box_close_button.png"
					,infoBoxClearance: new google.maps.Size(1, 1)
					,isHidden: false
					,pane: "floatPane"
					,enableEventPropagation: false
};

infoboxSouthseaCastle = new InfoBox(myOptionsInfoboxSouthseaCastle);

google.maps.event.addListener(markerSouthseaCastle, "click", function (e) {
			contentSouthseaCastle.innerHTML = '<h1>Southsea castle</h1><p class="pop_up_box_text"> - Built in 1544 by Henry VIII. It is free to visit and has a nice cafe.</p><div id="sscastle_startslider" onClick="startSlider(\'sscastle_startslider\', \'info_sscastle\')" OnMouseOver="this.style.cursor=\'pointer\';" OnMouseOut="this.style.cursor=\'default\';"><img src="http://portsmouthhistory.co.uk/pics/info_box_content/southsea_castle/my_nivo/demo/images/henry_8th_start.jpg" width="470" height="299" border="0" alt="Southsea Castle"/></div><div id="info_sscastle" style="display:none" ><iframe src="http://portsmouthhistory.co.uk/pics/info_box_content/southsea_castle/my_nivo/demo/demo.php" width="470" height="299" frameborder="0" scrolling="no"></iframe></div><p class="pop_up_box_text_smaller">(Once started, pictures change automatically on iPads etc).</p>';
			/*loading_div.style.display = 'block';*/
	        closeAllBubbles();
			closeCurrentImage();
			infoboxSouthseaCastle.open(map, this);
			this.setZIndex(google.maps.Marker.MAX_ZINDEX + 1);
			setZoomWhenMarkerClicked();
			/*map.setCenter(markerSouthseaCastle.getPosition());*/
			var currentZoom = map.getZoom();
			if (currentZoom <= 15){infoboxSouthseaCastleLatLng = new google.maps.LatLng(50.772935, -1.087829);}
			else if (currentZoom == 16){infoboxSouthseaCastleLatLng = new google.maps.LatLng(50.774650, -1.087829);}
			else if (currentZoom == 17){infoboxSouthseaCastleLatLng = new google.maps.LatLng(50.776061, -1.087829);}
			else if (currentZoom == 18){infoboxSouthseaCastleLatLng = new google.maps.LatLng(50.777201, -1.087829);}
			map.setCenter(infoboxSouthseaCastleLatLng);
			welcomeMessageHide();
			if (mobileOrNot === "true"){			
				makeAllUnClickable();
				makeAllPhotosUnClickable();
			}
			/*setTimeout (function(){loading_div.style.display = 'none';}, 600 );*/
});

//CITY MUSEUM-------------------

iconCityMuseumLatLng = new google.maps.LatLng(50.791840, -1.097646);

markerCityMuseum = new google.maps.Marker({
    position: iconCityMuseumLatLng,
    map: map,
    title: 'City Museum',
	icon: iconCityMuseum,
	zIndex:803,
	shape: shapeCityMuseum
});

var myOptionsInfoboxCityMuseum = {
					 content: contentCityMuseum
					 //This is the bit (2 lines)I have changed.
					,disableAutoPan: true
					,position: iconCityMuseumLatLng
					,maxWidth: 0
					,pixelOffset: new google.maps.Size(-241, 0)
					,zIndex: null
					,boxStyle: { 
					  background: "url('http://portsmouthhistory.co.uk/pics/template_images/pop_up_box_top_arrow.png') no-repeat"
						  ,width: "327px"
				   }
					,closeBoxMargin: "10px 2px 2px 2px"
					,closeBoxURL: "http://portsmouthhistory.co.uk/pics/template_images/pop_up_box_close_button.png"
					,infoBoxClearance: new google.maps.Size(1, 1)
					,isHidden: false
					,pane: "floatPane"
					,enableEventPropagation: false
};

infoboxCityMuseum = new InfoBox(myOptionsInfoboxCityMuseum);

google.maps.event.addListener(markerCityMuseum, "click", function (e) {
			contentCityMuseum.innerHTML = "<h1>Portsmouth City Museum</h1><p><img src='http://portsmouthhistory.co.uk/pics/info_box_content/city_museum/my_nivo/demo/images/portsmouth_city_museum2.jpg' width='297' height='167' border='0' alt='Portsmouth City Museum'/></p>";
			/*loading_div.style.display = 'block';*/
	        closeAllBubbles();
			closeCurrentImage();
			infoboxCityMuseum.open(map, this);
			this.setZIndex(google.maps.Marker.MAX_ZINDEX + 1);
			setZoomWhenMarkerClicked();
			/*map.setCenter(markerCityMuseum.getPosition());*/
			var currentZoom = map.getZoom();
			if (currentZoom <= 15){infoboxCityMuseumLatLng = new google.maps.LatLng(50.788790, -1.097646);}
			else if (currentZoom == 16){infoboxCityMuseumLatLng = new google.maps.LatLng(50.789957, -1.098842);}
			else if (currentZoom == 17){infoboxCityMuseumLatLng = new google.maps.LatLng(50.790988, -1.098391);}
			else if (currentZoom == 18){infoboxCityMuseumLatLng = new google.maps.LatLng(50.791347, -1.097984);}
			map.setCenter(infoboxCityMuseumLatLng);
			welcomeMessageHide();
			if (mobileOrNot === "true"){			
				makeAllUnClickable();
				makeAllPhotosUnClickable();
			}
			/*setTimeout (function(){loading_div.style.display = 'none';}, 600 );*/
});

//HG WELLS -------------------

iconHGWellsLatLng = new google.maps.LatLng(50.791189, -1.094567);

markerHGWells = new google.maps.Marker({
    position: iconHGWellsLatLng,
    map: map,
    title: 'HG Wells',
	icon: iconHGWells,
	zIndex:804,
	shape: shapeHGWells
});

var myOptionsInfoboxHGWells = {
					 content: contentHGWells
					 //This is the bit (2 lines)I have changed.
					,disableAutoPan: true
					,position: iconHGWellsLatLng
					,maxWidth: 0
					,pixelOffset: new google.maps.Size(-241, 0)
					,zIndex: null
					,boxStyle: { 
					  background: "url('http://portsmouthhistory.co.uk/pics/template_images/pop_up_box_top_arrow.png') no-repeat"
						  ,width: "500px"
				   }
					,closeBoxMargin: "10px 2px 2px 2px"
					,closeBoxURL: "http://portsmouthhistory.co.uk/pics/template_images/pop_up_box_close_button.png"
					,infoBoxClearance: new google.maps.Size(1, 1)
					,isHidden: false
					,pane: "floatPane"
					,enableEventPropagation: false
};

infoboxHGWells = new InfoBox(myOptionsInfoboxHGWells);

google.maps.event.addListener(markerHGWells, "click", function (e) {
			contentHGWells.innerHTML = '<p class="pop_up_box_text">Author, </p><h1>HG Wells,</h1><p class="pop_up_box_text"> lived in Elm Grove in the 1880s.</p><div id="hgwells_startslider" onClick="startSlider(\'hgwells_startslider\', \'info_hgwells\')" OnMouseOver="this.style.cursor=\'pointer\';" OnMouseOut="this.style.cursor=\'default\';"><img src="http://portsmouthhistory.co.uk/pics/info_box_content/hg_wells/my_nivo/demo/images/wells_start-01-01.jpg" width="470" height="327" border="0" alt="HG Wells"/></div><div id="info_hgwells" style="display:none" ><iframe src="http://portsmouthhistory.co.uk/pics/info_box_content/hg_wells/my_nivo/demo/demo.php" width="470" height="327" frameborder="0" scrolling="no"></iframe></div><p class="pop_up_box_text_smaller">(Once started, pictures change automatically on iPads etc).</p>';
			/*loading_div.style.display = 'block';*/
	        closeAllBubbles();
			closeCurrentImage();
			infoboxHGWells.open(map, this);
			this.setZIndex(google.maps.Marker.MAX_ZINDEX + 1);
			setZoomWhenMarkerClicked();
			/*map.setCenter(markerHGWells.getPosition());*/
			var currentZoom = map.getZoom();
			if (currentZoom <= 15){infoboxHGWellsLatLng = new google.maps.LatLng(50.785094, -1.094567);}
			else if (currentZoom == 16){infoboxHGWellsLatLng = new google.maps.LatLng(50.788234, -1.094567);}
			else if (currentZoom == 17){infoboxHGWellsLatLng = new google.maps.LatLng(50.789794, -1.094567);}
			else if (currentZoom == 18){infoboxHGWellsLatLng = new google.maps.LatLng(50.790479, -1.094567);}
			map.setCenter(infoboxHGWellsLatLng);
			welcomeMessageHide();
			if (mobileOrNot === "true"){			
				makeAllUnClickable();
				makeAllPhotosUnClickable();
			}
			/*setTimeout (function(){loading_div.style.display = 'none';}, 600 );*/
});

//JOHN POUNDS -------------------

iconJohnPoundsLatLng = new google.maps.LatLng(50.791708, -1.101218);

markerJohnPounds = new google.maps.Marker({
    position: iconJohnPoundsLatLng,
    map: map,
    title: 'John Pounds',
	icon: iconJohnPounds,
	zIndex:802,
	shape: shapeJohnPounds
});

var myOptionsInfoboxJohnPounds = {
					 content: contentJohnPounds
					 //This is the bit (2 lines)I have changed.
					,disableAutoPan: true
					,position: iconJohnPoundsLatLng
					,maxWidth: 0
					,pixelOffset: new google.maps.Size(-242, 0)
					,zIndex: null
					,boxStyle: { 
					  background: "url('http://portsmouthhistory.co.uk/pics/template_images/pop_up_box_top_arrow.png') no-repeat"
						  ,width: "334px"
				   }
					,closeBoxMargin: "10px 2px 2px 2px"
					,closeBoxURL: "http://portsmouthhistory.co.uk/pics/template_images/pop_up_box_close_button.png"
					,infoBoxClearance: new google.maps.Size(1, 1)
					,isHidden: false
					,pane: "floatPane"
					,enableEventPropagation: false
};

infoboxJohnPounds = new InfoBox(myOptionsInfoboxJohnPounds);

google.maps.event.addListener(markerJohnPounds, "click", function (e) {
			contentJohnPounds.innerHTML = "<h1>John Pounds</h1><p class='pop_up_box_text'> (b.1766) started the ragged schools, giving free education to poor children. </p><p><img src='http://portsmouthhistory.co.uk/pics/info_box_content/pounds/my_nivo/demo/images/john_pounds.jpg' width='304' height='410' border='0' alt='John Pounds'/></p>";
			/*loading_div.style.display = 'block';*/
	        closeAllBubbles();
			closeCurrentImage();
			infoboxJohnPounds.open(map, this);
			this.setZIndex(google.maps.Marker.MAX_ZINDEX + 1);
			setZoomWhenMarkerClicked();
			/*map.setCenter(markerJohnPounds.getPosition());*/
			var currentZoom = map.getZoom();
			if (currentZoom <= 15){infoboxJohnPoundsLatLng = new google.maps.LatLng(50.784896, -1.105231);}
			else if (currentZoom == 16){infoboxJohnPoundsLatLng = new google.maps.LatLng(50.788030, -1.103042);}
			else if (currentZoom == 17){infoboxJohnPoundsLatLng = new google.maps.LatLng(50.789861, -1.102055);}
			else if (currentZoom == 18){infoboxJohnPoundsLatLng = new google.maps.LatLng(50.790771, -1.101642);}
			map.setCenter(infoboxJohnPoundsLatLng);
			welcomeMessageHide();
			if (mobileOrNot === "true"){			
				makeAllUnClickable();
				makeAllPhotosUnClickable();
			}
			/*setTimeout (function(){loading_div.style.display = 'none';}, 600 );*/
});

//CONAN DOYLE -------------------

iconConanDoyleLatLng = new google.maps.LatLng(50.790575, -1.090983);

markerConanDoyle = new google.maps.Marker({
    position: iconConanDoyleLatLng,
    map: map,
    title: 'Conan Doyle',
	icon: iconConanDoyle,
	zIndex:805,
	shape: shapeConanDoyle
});

var myOptionsInfoboxConanDoyle = {
					 content: contentConanDoyle
					 //This is the bit (2 lines)I have changed.
					,disableAutoPan: true
					,position: iconConanDoyleLatLng
					,maxWidth: 0
					,pixelOffset: new google.maps.Size(-241, 0)
					,zIndex: null
					,boxStyle: { 
					  background: "url('http://portsmouthhistory.co.uk/pics/template_images/pop_up_box_top_arrow.png') no-repeat"
						  ,width: "330px"
				   }
					,closeBoxMargin: "10px 2px 2px 2px"
					,closeBoxURL: "http://portsmouthhistory.co.uk/pics/template_images/pop_up_box_close_button.png"
					,infoBoxClearance: new google.maps.Size(1, 1)
					,isHidden: false
					,pane: "floatPane"
					,enableEventPropagation: false
};

infoboxConanDoyle = new InfoBox(myOptionsInfoboxConanDoyle);

google.maps.event.addListener(markerConanDoyle, "click", function (e) {
			contentConanDoyle.innerHTML = "<h1>Conan Doyle</h1><p class='pop_up_box_text'>, author of the Sherlock Holmes novels, ran a medical practice in Elm Grove from 1882. </p><p><img src='http://portsmouthhistory.co.uk/pics/info_box_content/doyle/my_nivo/demo/images/conan_doyle.jpg' width='300' height='370' border='0' alt='Conan Doyle'/></p>";
			/*loading_div.style.display = 'block';*/
	        closeAllBubbles();
			closeCurrentImage();
			infoboxConanDoyle.open(map, this);
			this.setZIndex(google.maps.Marker.MAX_ZINDEX + 1);
			setZoomWhenMarkerClicked();
			/*map.setCenter(markerConanDoyle.getPosition());*/
			var currentZoom = map.getZoom();
			if (currentZoom <= 15){infoboxConanDoyleLatLng = new google.maps.LatLng(50.783309, -1.094116);}
			else if (currentZoom == 16){infoboxConanDoyleLatLng = new google.maps.LatLng(50.787134, -1.092592);}
			else if (currentZoom == 17){infoboxConanDoyleLatLng = new google.maps.LatLng(50.788735, -1.091584);}
			else if (currentZoom == 18){infoboxConanDoyleLatLng = new google.maps.LatLng(50.789834, -1.091133);}
			map.setCenter(infoboxConanDoyleLatLng);
			welcomeMessageHide();
			if (mobileOrNot === "true"){			
				makeAllUnClickable();
				makeAllPhotosUnClickable();
			}
			/*setTimeout (function(){loading_div.style.display = 'none';}, 600 );*/
});

//D-DAY MUSEUM -------------------

iconLatLng = new google.maps.LatLng(50.779994, -1.090415);

markerDday = new google.maps.Marker({
    position: iconLatLng,
    map: map,
    title: 'D-Day museum',
	icon: iconDday,
	zIndex:910,
	shape: shapeDDay
});

var myOptionsInfoboxDday = {
					 content: contentDday
					 //This is the bit (2 lines)I have changed.
					,disableAutoPan: true
					,position: iconLatLng
					,maxWidth: 0
					,pixelOffset: new google.maps.Size(-240, 0)
					,zIndex: null
					,boxStyle: { 
					  background: "url('http://portsmouthhistory.co.uk/pics/template_images/pop_up_box_top_arrow.png') no-repeat"
						  ,width: "500px"
				   }
					,closeBoxMargin: "10px 2px 2px 2px"
					,closeBoxURL: "http://portsmouthhistory.co.uk/pics/template_images/pop_up_box_close_button.png"
					,infoBoxClearance: new google.maps.Size(1, 1)
					,isHidden: false
					,pane: "floatPane"
					,enableEventPropagation: false
};

infoboxDday = new InfoBox(myOptionsInfoboxDday);

google.maps.event.addListener(markerDday, "click", function (e) {
			contentDday.innerHTML = "<h1>D-Day Museum</h1><p class='pop_up_box_text'> - Guns and sewing; something for everyone.</p><p><img src='http://portsmouthhistory.co.uk/pics/info_box_content/d_day/my_nivo/demo/images/d-day-museum-portsmouth.jpg' width='470' height='220' border='0' alt='D-Day Museum'/></p>";
			/*loading_div.style.display = 'block';*/
	        closeAllBubbles();
			closeCurrentImage();
			infoboxDday.open(map, this);
			setZoomWhenMarkerClicked();
			this.setZIndex(google.maps.Marker.MAX_ZINDEX + 1);
			setZoomWhenMarkerClicked();
			/*map.setCenter(markerDday.getPosition());*/
			var currentZoom = map.getZoom();
			if (currentZoom <= 15){infoboxLatLng = new google.maps.LatLng(50.776518, -1.088805);}
			else if (currentZoom == 16){infoboxLatLng = new google.maps.LatLng(50.776892, -1.088805);}
			else if (currentZoom == 17){infoboxLatLng = new google.maps.LatLng(50.778744, -1.089615);}
			else if (currentZoom == 18){infoboxLatLng = new google.maps.LatLng(50.779097, -1.089615);}
			map.setCenter(infoboxLatLng);
			welcomeMessageHide();
			if (mobileOrNot === "true"){			
				makeAllUnClickable();
				makeAllPhotosUnClickable();
			}
			/*setTimeout (function(){loading_div.style.display = 'none';}, 600 );*/
});

//MARINES MUSEUM -------------------

iconMarinesLatLng = new google.maps.LatLng(50.784895, -1.054344);

markerMarines = new google.maps.Marker({
    position: iconMarinesLatLng,
    map: map,
    title: 'Royal Marines Museum',
	icon: iconMarines,
	zIndex:908,
	shape: shapeMarines
});

var myOptionsInfoboxMarines = {
					 content: contentMarines
					 //This is the bit (2 lines)I have changed.
					,disableAutoPan: true
					,position: iconMarinesLatLng
					,maxWidth: 0
					,pixelOffset: new google.maps.Size(-240, 0)
					,zIndex: null
					,boxStyle: { 
					  background: "url('http://portsmouthhistory.co.uk/pics/template_images/pop_up_box_top_arrow.png') no-repeat"
						  ,width: "500px"
				   }
					,closeBoxMargin: "10px 2px 2px 2px"
					,closeBoxURL: "http://portsmouthhistory.co.uk/pics/template_images/pop_up_box_close_button.png"
					,infoBoxClearance: new google.maps.Size(1, 1)
					,isHidden: false
					,pane: "floatPane"
					,enableEventPropagation: false
};

infoboxMarines = new InfoBox(myOptionsInfoboxMarines);
google.maps.event.addListener(markerMarines, "click", function (e) {
			contentMarines.innerHTML = '<p class="pop_up_box_text">Royal Marines Barracks - today the Royal Marines Museum.</p><div id="marines_startslider" onClick="startSlider(\'marines_startslider\', \'info_marines\')" OnMouseOver="this.style.cursor=\'pointer\';" OnMouseOut="this.style.cursor=\'default\';"><img src="http://portsmouthhistory.co.uk/pics/info_box_content/royal_marines/my_nivo/demo/images/royal-marines-museum-portsmouth-01.jpg" width="470" height="367" border="0" alt="Marines Museum"/></div><div id="info_marines" style="display:none" ><iframe src="http://portsmouthhistory.co.uk/pics/info_box_content/royal_marines/my_nivo/demo/demo.php" width="470" height="367" frameborder="0" scrolling="no"></iframe></div><p class="pop_up_box_text_smaller">(Once started, pictures change automatically on iPads etc).</p>';
	        closeAllBubbles();
			closeCurrentImage();
			infoboxMarines.open(map, this);
			this.setZIndex(google.maps.Marker.MAX_ZINDEX + 1);
			setZoomWhenMarkerClicked();
			/*map.setCenter(markerMarines.getPosition());*/
			var currentZoom = map.getZoom();
			if (currentZoom <= 15){infoboxMarinesLatLng = new google.maps.LatLng(50.778910, -1.054494);}
			else if (currentZoom == 16){infoboxMarinesLatLng = new google.maps.LatLng(50.781925, -1.054494);}
			else if (currentZoom == 17){infoboxMarinesLatLng = new google.maps.LatLng(50.783445, -1.054494);}
			else if (currentZoom == 18){infoboxMarinesLatLng = new google.maps.LatLng(50.784358, -1.054494);}
			map.setCenter(infoboxMarinesLatLng);
			welcomeMessageHide();
			if (mobileOrNot === "true"){			
				makeAllUnClickable();
				makeAllPhotosUnClickable();
			}
			/*setTimeout (function(){loading_div.style.display = 'none';}, 600 );*/
});

//SSP - LABEL -------------------

iconSSPLableLatLng = new google.maps.LatLng(50.778536, -1.075920);

markerSSPLable = new google.maps.Marker({
    position: iconSSPLableLatLng,
    map: map,
    title: 'South Parade Pier',
	icon: iconSSPLable,
	zIndex:911,
	shape: shapeSSPLable
});

var myOptionsInfoboxSSPLable = {
					 content: contentSSPLable
					 //This is the bit (2 lines)I have changed.
					,disableAutoPan: true
					,position: iconSSPLableLatLng
					,maxWidth: 0
					,pixelOffset: new google.maps.Size(-243, 0)
					,zIndex: null
					,boxStyle: { 
					  background: "url('http://portsmouthhistory.co.uk/pics/template_images/pop_up_box_top_arrow.png') no-repeat"
						  ,width: "500px"
				   }
					,closeBoxMargin: "10px 2px 2px 2px"
					,closeBoxURL: "http://portsmouthhistory.co.uk/pics/template_images/pop_up_box_close_button.png"
					,infoBoxClearance: new google.maps.Size(1, 1)
					,isHidden: false
					,pane: "floatPane"
					,enableEventPropagation: false
};

infoboxSSPLable = new InfoBox(myOptionsInfoboxSSPLable);

google.maps.event.addListener(markerSSPLable, "click", function (e) {
			contentSSPLable.innerHTML = '<h1>South Parade Pier</h1><div id="ssp_startslider" onClick="startSlider(\'ssp_startslider\', \'info_ssp\')" OnMouseOver="this.style.cursor=\'pointer\';" OnMouseOut="this.style.cursor=\'default\';"><img src="http://portsmouthhistory.co.uk/pics/info_box_content/ssp/my_nivo/demo/images/south_parade_pier_start-01.jpg" width="470" height="250" border="0" alt="South Parade Pier"/></div><div id="info_ssp" style="display:none" ><iframe src="http://portsmouthhistory.co.uk/pics/info_box_content/ssp/my_nivo/demo/demo.php" width="470" height="250" frameborder="0" scrolling="no"></iframe></div><p class="pop_up_box_text_smaller">(Once started, pictures change automatically on iPads etc).</p>';
			/*loading_div.style.display = 'block';*/
	        closeAllBubbles();
			closeCurrentImage();
			infoboxSSPLable.open(map, this);
			this.setZIndex(google.maps.Marker.MAX_ZINDEX + 1);
			setZoomWhenMarkerClicked();
			/*map.setCenter(markerSSPLable.getPosition());*/
			var currentZoom = map.getZoom();
			if (currentZoom <= 15){infoboxSSPLableLatLng = new google.maps.LatLng(50.773809, -1.075920);}
			else if (currentZoom == 16){infoboxSSPLableLatLng = new google.maps.LatLng(50.776648, -1.075920);}
			else if (currentZoom == 17){infoboxSSPLableLatLng = new google.maps.LatLng(50.777415, -1.075920);}
			else if (currentZoom == 18){infoboxSSPLableLatLng = new google.maps.LatLng(50.777815, -1.075920);}
			map.setCenter(infoboxSSPLableLatLng);
			welcomeMessageHide();
			if (mobileOrNot === "true"){			
				makeAllUnClickable();
				makeAllPhotosUnClickable();
			}
			/*setTimeout (function(){loading_div.style.display = 'none';}, 600 );*/
});

//BAFFINS POND -------------------

iconBaffinsLatLng = new google.maps.LatLng(50.807508, -1.054945);

markerBaffins = new google.maps.Marker({
    position: iconBaffinsLatLng,
    map: map,
    title: 'Baffins Pond',
	icon: iconBaffins,
	zIndex:799,
	shape: shapeBaffins
});

var myOptionsInfoboxBaffins = {
					 content: contentBaffins
					 //This is the bit (2 lines)I have changed.
					,disableAutoPan: true
					,position: iconBaffinsLatLng
					,maxWidth: 0
					,pixelOffset: new google.maps.Size(-239, 0)
					,zIndex: null
					,boxStyle: { 
					  background: "url('http://portsmouthhistory.co.uk/pics/template_images/pop_up_box_top_arrow.png') no-repeat"
						  ,width: "500px"
				   }
					,closeBoxMargin: "10px 2px 2px 2px"
					,closeBoxURL: "http://portsmouthhistory.co.uk/pics/template_images/pop_up_box_close_button.png"
					,infoBoxClearance: new google.maps.Size(1, 1)
					,isHidden: false
					,pane: "floatPane"
					,enableEventPropagation: false
};

infoboxBaffins = new InfoBox(myOptionsInfoboxBaffins);

google.maps.event.addListener(markerBaffins, "click", function (e) {
			contentBaffins.innerHTML = '<h1>Baffins Pond</h1><p class="pop_up_box_text"> - Ice creams, play park, cafe and nice ducks.</p><div id="point_startslider" onClick="startSlider(\'point_startslider\', \'info_point\')" OnMouseOver="this.style.cursor=\'pointer\';" OnMouseOut="this.style.cursor=\'default\';"><img src="http://portsmouthhistory.co.uk/pics/info_box_content/baffins/my_nivo/demo/images/baffins_start-01.jpg" width="470" height="291" border="0" alt="Baffins Pond"/></div><div id="info_point" style="display:none" ><iframe src="http://portsmouthhistory.co.uk/pics/info_box_content/baffins/my_nivo/demo/demo.php" width="470" height="291" frameborder="0" scrolling="no"></iframe></div><p class="pop_up_box_text_smaller">(Once started, pictures change automatically on iPads etc).</p>';
			/*loading_div.style.display = 'block';*/
	        closeAllBubbles();
			closeCurrentImage();
			infoboxBaffins.open(map, this);
			this.setZIndex(google.maps.Marker.MAX_ZINDEX + 1);
			setZoomWhenMarkerClicked();
			/*map.setCenter(markerBaffins.getPosition());*/
			var currentZoom = map.getZoom();
			if (currentZoom <= 15){infoboxBaffinsLatLng = new google.maps.LatLng(50.802474, -1.054945);}
			else if (currentZoom == 16){infoboxBaffinsLatLng = new google.maps.LatLng(50.805200, -1.054945);}
			else if (currentZoom == 17){infoboxBaffinsLatLng = new google.maps.LatLng(50.806171, -1.054945);}
			else if (currentZoom == 18){infoboxBaffinsLatLng = new google.maps.LatLng(50.806951, -1.054945);}
			map.setCenter(infoboxBaffinsLatLng);
			welcomeMessageHide();
			if (mobileOrNot === "true"){			
				makeAllUnClickable();
				makeAllPhotosUnClickable();
			}
			/*setTimeout (function(){loading_div.style.display = 'none';}, 600 );*/
});

//HOLBROOKE -------------------

iconHolbrookeLatLng = new google.maps.LatLng(50.788371, -1.087013);

markerHolbrooke = new google.maps.Marker({
    position: iconHolbrookeLatLng,
    map: map,
    title: 'Holbrooke',
	icon: iconHolbrooke,
	zIndex:807,
	shape: shapeHolbrooke
});

var myOptionsInfoboxHolbrooke = {
					 content: contentHolbrooke
					 //This is the bit (2 lines)I have changed.
					,disableAutoPan: true
					,position: iconHolbrookeLatLng
					,maxWidth: 0
					,pixelOffset: new google.maps.Size(-241, 0)
					,zIndex: null
					,boxStyle: { 
					  background: "url('http://portsmouthhistory.co.uk/pics/template_images/pop_up_box_top_arrow.png') no-repeat"
						  ,width: "500px"
				   }
					,closeBoxMargin: "10px 2px 2px 2px"
					,closeBoxURL: "http://portsmouthhistory.co.uk/pics/template_images/pop_up_box_close_button.png"
					,infoBoxClearance: new google.maps.Size(1, 1)
					,isHidden: false
					,pane: "floatPane"
					,enableEventPropagation: false
};


infoboxHolbrooke = new InfoBox(myOptionsInfoboxHolbrooke);

google.maps.event.addListener(markerHolbrooke, "click", function (e) {
			contentHolbrooke.innerHTML = "<h1>Holbrook</h1><p class='pop_up_box_text'> - (b. 1888) was awarded the Victoria Cross in WW1 when his submarine, HMS B11 (pictured), dived under five rows of mines to sink the Ottoman ironclad, the Mesudiye.</p><p><img src='http://portsmouthhistory.co.uk/pics/info_box_content/holbrooke/my_nivo/demo/images/holbrook_portsmouth.jpg' width='470' height='250' border='0' alt='Holbrooke'/></p>";
			/*loading_div.style.display = 'block';*/
	        closeAllBubbles();
			closeCurrentImage();
			infoboxHolbrooke.open(map, this);
			this.setZIndex(google.maps.Marker.MAX_ZINDEX + 1);
			setZoomWhenMarkerClicked();
			/*map.setCenter(markerHolbrooke.getPosition());*/
			var currentZoom = map.getZoom();
			if (currentZoom <= 15){infoboxHolbrookeLatLng = new google.maps.LatLng(50.783608, -1.087013);}
			else if (currentZoom == 16){infoboxHolbrookeLatLng = new google.maps.LatLng(50.785791, -1.087013);}
			else if (currentZoom == 17){infoboxHolbrookeLatLng = new google.maps.LatLng(50.787251, -1.087013);}
			else if (currentZoom == 18){infoboxHolbrookeLatLng = new google.maps.LatLng(50.787705, -1.087013);}
			map.setCenter(infoboxHolbrookeLatLng);
			welcomeMessageHide();
			if (mobileOrNot === "true"){			
				makeAllUnClickable();
				makeAllPhotosUnClickable();
			}
			/*setTimeout (function(){loading_div.style.display = 'none';}, 600 );*/
});

//UNWIN -------------------

iconUnwinLatLng = new google.maps.LatLng(50.782809, -1.069322);

markerUnwin = new google.maps.Marker({
    position: iconUnwinLatLng,
    map: map,
    title: 'Unwin',
	icon: iconUnwin,
	zIndex:810,
	shape: shapeUnwin
});


var myOptionsInfoboxUnwin = {
					 content: contentUnwin
					 //This is the bit (2 lines)I have changed.
					,disableAutoPan: true
					,position: iconUnwinLatLng
					,maxWidth: 0
					,pixelOffset: new google.maps.Size(-241, 0)
					,zIndex: null
					,boxStyle: { 
					  background: "url('http://portsmouthhistory.co.uk/pics/template_images/pop_up_box_top_arrow.png') no-repeat"
						  ,width: "500px"
				   }
					,closeBoxMargin: "10px 2px 2px 2px"
					,closeBoxURL: "http://portsmouthhistory.co.uk/pics/template_images/pop_up_box_close_button.png"
					,infoBoxClearance: new google.maps.Size(1, 1)
					,isHidden: false
					,pane: "floatPane"
					,enableEventPropagation: false
};

infoboxUnwin = new InfoBox(myOptionsInfoboxUnwin);

google.maps.event.addListener(markerUnwin, "click", function (e) {
			contentUnwin.innerHTML = "<h1>Unwin</h1> <p class='pop_up_box_text'>was the commander of the SS River Clyde at the Gallipoli landings in WW1. He was awarded the Victoria Cross. </p><p><img src='http://portsmouthhistory.co.uk/pics/info_box_content/unwin/my_nivo/demo/images/edwin_unwin.jpg' width='470' height='287' border='0' alt='Unwin' /></p>";
			/*loading_div.style.display = 'block';*/
	        closeAllBubbles();
			closeCurrentImage();
			infoboxUnwin.open(map, this);
			this.setZIndex(google.maps.Marker.MAX_ZINDEX + 1);
			setZoomWhenMarkerClicked();
			/*map.setCenter(markerUnwin.getPosition());*/
			var currentZoom = map.getZoom();
			if (currentZoom <= 15){infoboxUnwinLatLng = new google.maps.LatLng(50.777445, -1.069322);}
			else if (currentZoom == 16){infoboxUnwinLatLng = new google.maps.LatLng(50.780337, -1.069322);}
			else if (currentZoom == 17){infoboxUnwinLatLng = new google.maps.LatLng(50.781417, -1.069322);}
			else if (currentZoom == 18){infoboxUnwinLatLng = new google.maps.LatLng(50.782089, -1.069322);}
			map.setCenter(infoboxUnwinLatLng);
			welcomeMessageHide();
			if (mobileOrNot === "true"){			
				makeAllUnClickable();
				makeAllPhotosUnClickable();
			}
			/*setTimeout (function(){loading_div.style.display = 'none';}, 600 );*/
});

//ELLIS -------------------

iconEllisLatLng = new google.maps.LatLng(50.787835, -1.090404);

markerEllis = new google.maps.Marker({
    position: iconEllisLatLng,
    map: map,
    title: 'Ellis',
	icon: iconEllis,
	zIndex:808,
	shape: shapeEllis
});

var myOptionsInfoboxEllis = {
					 content: contentEllis
					 //This is the bit (2 lines)I have changed.
					,disableAutoPan: true
					,position: iconEllisLatLng
					,maxWidth: 0
					,pixelOffset: new google.maps.Size(-241, 0)
					,zIndex: null
					,boxStyle: { 
					  background: "url('http://portsmouthhistory.co.uk/pics/template_images/pop_up_box_top_arrow.png') no-repeat"
						  ,width: "500px"
				   }
					,closeBoxMargin: "10px 2px 2px 2px"
					,closeBoxURL: "http://portsmouthhistory.co.uk/pics/template_images/pop_up_box_close_button.png"
					,infoBoxClearance: new google.maps.Size(1, 1)
					,isHidden: false
					,pane: "floatPane"
					,enableEventPropagation: false
};

infoboxEllis = new InfoBox(myOptionsInfoboxEllis);

google.maps.event.addListener(markerEllis, "click", function (e) {
			contentEllis.innerHTML = "<h1>Thomas Ellis Owen</h1><p class='pop_up_box_text'> (1805 - 1862) - Architect who built many buildings in Southsea.</p><p><img src='http://portsmouthhistory.co.uk/pics/info_box_content/ellis_owen/my_nivo/demo/images/portsea_island.jpg' width='470' height='335' border='0' alt='Ellis'/></p><p class='pop_up_box_text'>Looking west across Southsea today. (Image credit - R Norton.)</p>";
			/*loading_div.style.display = 'block';*/
	        closeAllBubbles();
			closeCurrentImage();
			infoboxEllis.open(map, this);
			this.setZIndex(google.maps.Marker.MAX_ZINDEX + 1);
			setZoomWhenMarkerClicked();
			/*map.setCenter(markerEllis.getPosition());*/
			var currentZoom = map.getZoom();
			if (currentZoom <= 15){infoboxEllisLatLng = new google.maps.LatLng(50.782196, -1.090404);}
			else if (currentZoom == 16){infoboxEllisLatLng = new google.maps.LatLng(50.784882, -1.090404);}
			else if (currentZoom == 17){infoboxEllisLatLng = new google.maps.LatLng(50.786415, -1.090404);}
			else if (currentZoom == 18){infoboxEllisLatLng = new google.maps.LatLng(50.787094, -1.090404);}
			map.setCenter(infoboxEllisLatLng);
			welcomeMessageHide();
			if (mobileOrNot === "true"){			
				makeAllUnClickable();
				makeAllPhotosUnClickable();
			}
			/*setTimeout (function(){loading_div.style.display = 'none';}, 600 );*/
});

//KIPLING -------------------
iconKiplingLatLng = new google.maps.LatLng(50.789948, -1.080346);

markerKipling = new google.maps.Marker({
    position: iconKiplingLatLng,
    map: map,
    title: 'Kipling',
	icon: iconKipling,
	zIndex:806,
	shape: shapeKipling
});

var myOptionsInfoboxKipling = {
					 content: contentKipling
					 //This is the bit (2 lines)I have changed.
					,disableAutoPan: true
					,position: iconKiplingLatLng
					,maxWidth: 0
					,pixelOffset: new google.maps.Size(-240, 0)
					,zIndex: null
					,boxStyle: { 
					  background: "url('http://portsmouthhistory.co.uk/pics/template_images/pop_up_box_top_arrow.png') no-repeat"
						  ,width: "430px"
				   }
					,closeBoxMargin: "10px 2px 2px 2px"
					,closeBoxURL: "http://portsmouthhistory.co.uk/pics/template_images/pop_up_box_close_button.png"
					,infoBoxClearance: new google.maps.Size(1, 1)
					,isHidden: false
					,pane: "floatPane"
					,enableEventPropagation: false
};
infoboxKipling = new InfoBox(myOptionsInfoboxKipling);
google.maps.event.addListener(markerKipling, "click", function (e) {
			contentKipling.innerHTML = "<h1>Rudyard Kipling</h1><p class='pop_up_box_text'>, author of  Book, lived in Campbell Road in the 1870s.</p><p><img src='http://portsmouthhistory.co.uk/pics/info_box_content/kipling/my_nivo/demo/images/rudyard_kipling1.jpg' width='400' height='234' border='0' alt='Kipling'/></p><p class='pop_up_box_text'>Orignal edition of The  Book. (Image - Wikipedia)</p>";
			/*loading_div.style.display = 'block';*/
	        closeAllBubbles();
			closeCurrentImage();
			infoboxKipling.open(map, this);
			this.setZIndex(google.maps.Marker.MAX_ZINDEX + 1);
			setZoomWhenMarkerClicked();
			/*map.setCenter(markerKipling.getPosition());*/
			var currentZoom = map.getZoom();
			if (currentZoom <= 15){infoboxKiplingLatLng = new google.maps.LatLng(50.785059, -1.080346);}
			else if (currentZoom == 16){infoboxKiplingLatLng = new google.maps.LatLng(50.787406, -1.080346);}
			else if (currentZoom == 17){infoboxKiplingLatLng = new google.maps.LatLng(50.788816, -1.080346);}
			else if (currentZoom == 18){infoboxKiplingLatLng = new google.maps.LatLng(50.789394, -1.080346);}
			map.setCenter(infoboxKiplingLatLng);
			welcomeMessageHide();
			if (mobileOrNot === "true"){			
				makeAllUnClickable();
				makeAllPhotosUnClickable();
			}
			/*setTimeout (function(){loading_div.style.display = 'none';}, 600 );*/
});

//ELLEN -------------------
iconEllenLatLng = new google.maps.LatLng(50.786811, -1.065212);

markerEllen = new google.maps.Marker({
    position: iconEllenLatLng,
    map: map,
    title: 'Ellen Ternan',
	icon: iconEllen,
	zIndex:810,
	shape: shapeEllen
});

var myOptionsInfoboxEllen = {
					 content: contentEllen
					 //This is the bit (2 lines)I have changed.
					,disableAutoPan: true
					,position: iconEllenLatLng
					,maxWidth: 0
					,pixelOffset: new google.maps.Size(-240, 0)
					,zIndex: null
					,boxStyle: { 
					  background: "url('http://portsmouthhistory.co.uk/pics/template_images/pop_up_box_top_arrow.png') no-repeat"
						  ,width: "405px"
				   }
					,closeBoxMargin: "10px 2px 2px 2px"
					,closeBoxURL: "http://portsmouthhistory.co.uk/pics/template_images/pop_up_box_close_button.png"
					,infoBoxClearance: new google.maps.Size(1, 1)
					,isHidden: false
					,pane: "floatPane"
					,enableEventPropagation: false
};
infoboxEllen = new InfoBox(myOptionsInfoboxEllen);
google.maps.event.addListener(markerEllen, "click", function (e) {
			contentEllen.innerHTML = "<h1>Actress Ellen Ternan</h1><p class='pop_up_box_text'>, believed to be mistress of Charles Dickens, is buried in Highland Road cemetery.</p><p><img src='http://portsmouthhistory.co.uk/pics/info_box_content/ellen/my_nivo/demo/images/ellen_ternan.jpg' width='375' height='352' border='0' alt='Ellen Ternan'/></p>";
			/*loading_div.style.display = 'block';*/
	        closeAllBubbles();
			closeCurrentImage();
			infoboxEllen.open(map, this);
			this.setZIndex(google.maps.Marker.MAX_ZINDEX + 1);
			setZoomWhenMarkerClicked();
			/*map.setCenter(markerEllen.getPosition());*/
			var currentZoom = map.getZoom();
			if (currentZoom <= 15){infoboxEllenLatLng = new google.maps.LatLng(50.780961, -1.065212);}
			else if (currentZoom == 16){infoboxEllenLatLng = new google.maps.LatLng(50.783757, -1.065212);}
			else if (currentZoom == 17){infoboxEllenLatLng = new google.maps.LatLng(50.785168, -1.065212);}
			else if (currentZoom == 18){infoboxEllenLatLng = new google.maps.LatLng(50.786016, -1.065212);}
			map.setCenter(infoboxEllenLatLng);
			welcomeMessageHide();
			if (mobileOrNot === "true"){			
				makeAllUnClickable();
				makeAllPhotosUnClickable();
			}
			/*setTimeout (function(){loading_div.style.display = 'none';}, 600 );*/
});

//BLITZ -------------------
iconBlitzLatLng = new google.maps.LatLng(50.801229, -1.089149);

markerBlitz = new google.maps.Marker({
    position: iconBlitzLatLng,
    map: map,
    title: 'Blitz',
	icon: iconBlitz,
	zIndex:904,
	shape: shapeBlitz
});

var myOptionsInfoboxBlitz = {
					 content: contentBlitz
					 //This is the bit (2 lines)I have changed.
					,disableAutoPan: true
					,position: iconBlitzLatLng
					,maxWidth: 0
					,pixelOffset: new google.maps.Size(-241, 0)
					,zIndex: null
					,boxStyle: { 
					  background: "url('http://portsmouthhistory.co.uk/pics/template_images/pop_up_box_top_arrow.png') no-repeat"
						  ,width: "500px"
				   }
					,closeBoxMargin: "10px 2px 2px 2px"
					,closeBoxURL: "http://portsmouthhistory.co.uk/pics/template_images/pop_up_box_close_button.png"
					,infoBoxClearance: new google.maps.Size(1, 1)
					,isHidden: false
					,pane: "floatPane"
					,enableEventPropagation: false
};
infoboxBlitz = new InfoBox(myOptionsInfoboxBlitz);
google.maps.event.addListener(markerBlitz, "click", function (e) {
			contentBlitz.innerHTML = '<p class="pop_up_box_text">As the home of the Royal Navy, Portsmouth was targeted during WW2.</p><div id="blitz_startslider" onClick="startSlider(\'blitz_startslider\', \'info_blitz\')" OnMouseOver="this.style.cursor=\'pointer\';" OnMouseOut="this.style.cursor=\'default\';"><img src="http://portsmouthhistory.co.uk/pics/info_box_content/blitz/my_nivo/demo/images/blitz_start-01.jpg" width="470" height="450" border="0" alt="Portsmouth Blitz"/></div><div id="info_blitz" style="display:none" ><iframe src="http://portsmouthhistory.co.uk/pics/info_box_content/blitz/my_nivo/demo/demo.php" width="470" height="450" frameborder="0" scrolling="no"></iframe></div><p class="pop_up_box_text_smaller">(Once started, pictures change automatically on iPads etc).</p>';
			/*loading_div.style.display = 'block';*/
	        closeAllBubbles();
			closeCurrentImage();
			infoboxBlitz.open(map, this);
			this.setZIndex(google.maps.Marker.MAX_ZINDEX + 1);
			setZoomWhenMarkerClicked();
			/*map.setCenter(markerBlitz.getPosition());*/
			var currentZoom = map.getZoom();
			if (currentZoom <= 15){infoboxBlitzLatLng = new google.maps.LatLng(50.793930, -1.089149);}
			else if (currentZoom == 16){infoboxBlitzLatLng = new google.maps.LatLng(50.797294, -1.089149);}
			else if (currentZoom == 17){infoboxBlitzLatLng = new google.maps.LatLng(50.799369, -1.089149);}
			else if (currentZoom == 18){infoboxBlitzLatLng = new google.maps.LatLng(50.800224, -1.089149);}
			map.setCenter(infoboxBlitzLatLng);
			welcomeMessageHide();
			if (mobileOrNot === "true"){			
				makeAllUnClickable();
				makeAllPhotosUnClickable();
			}
			/*setTimeout (function(){loading_div.style.display = 'none';}, 600 );*/
});

//BRUNEL -------------------
iconBrunelLatLng = new google.maps.LatLng(50.796794, -1.101744);

markerBrunel = new google.maps.Marker({
    position: iconBrunelLatLng,
    map: map,
    title: 'Isambard Brunel',
	icon: iconBrunel,
	zIndex:800,
	shape: shapeBrunel
});

var myOptionsInfoboxBrunel = {
					 content: contentBrunel
					 //This is the bit (2 lines)I have changed.
					,disableAutoPan: true
					,position: iconBrunelLatLng
					,maxWidth: 0
					,pixelOffset: new google.maps.Size(-240, 0)
					,zIndex: null
					,boxStyle: { 
					  background: "url('http://portsmouthhistory.co.uk/pics/template_images/pop_up_box_top_arrow.png') no-repeat"
						  ,width: "500px"
				   }
					,closeBoxMargin: "10px 2px 2px 2px"
					,closeBoxURL: "http://portsmouthhistory.co.uk/pics/template_images/pop_up_box_close_button.png"
					,infoBoxClearance: new google.maps.Size(1, 1)
					,isHidden: false
					,pane: "floatPane"
					,enableEventPropagation: false
};
infoboxBrunel = new InfoBox(myOptionsInfoboxBrunel);
google.maps.event.addListener(markerBrunel, "click", function (e) {
			contentBrunel.innerHTML = '<h1>Isambard Kingdom Brunel</h1><div id="brunel_startslider" onClick="startSlider(\'brunel_startslider\', \'info_brunel\')" OnMouseOver="this.style.cursor=\'pointer\';" OnMouseOut="this.style.cursor=\'default\';"><img src="http://portsmouthhistory.co.uk/pics/info_box_content/brunel/my_nivo/demo/images/brunel_portsmouth_start-01.jpg" width="470" height="313" border="0" alt="Isambard Kingdom Brunel"/></div><div id="info_brunel" style="display:none" ><iframe src="http://portsmouthhistory.co.uk/pics/info_box_content/brunel/my_nivo/demo/demo.php" width="470" height="313" frameborder="0" scrolling="no"></iframe></div><p class="pop_up_box_text_smaller">(Once started, pictures change automatically on iPads etc).</p>';
			/*loading_div.style.display = 'block';*/
	        closeAllBubbles();
			closeCurrentImage();
			infoboxBrunel.open(map, this);
			this.setZIndex(google.maps.Marker.MAX_ZINDEX + 1);
			setZoomWhenMarkerClicked();
			/*map.setCenter(markerBrunel.getPosition());*/
			var currentZoom = map.getZoom();
			if (currentZoom <= 15){infoboxBrunelLatLng = new google.maps.LatLng(50.791374, -1.101744);}
			else if (currentZoom == 16){infoboxBrunelLatLng = new google.maps.LatLng(50.794209, -1.101744);}
			else if (currentZoom == 17){infoboxBrunelLatLng = new google.maps.LatLng(50.795389, -1.101744);}
			else if (currentZoom == 18){infoboxBrunelLatLng = new google.maps.LatLng(50.796054, -1.101744);}
			map.setCenter(infoboxBrunelLatLng);
			welcomeMessageHide();
			if (mobileOrNot === "true"){			
				makeAllUnClickable();
				makeAllPhotosUnClickable();
			}
			/*setTimeout (function(){loading_div.style.display = 'none';}, 600 );*/
});

//NELSON -------------------
iconNelsonLatLng = new google.maps.LatLng(50.780679, -1.104941);

markerNelson = new google.maps.Marker({
    position: iconNelsonLatLng,
    map: map,
    title: 'Admiral Lord Nelson',
	icon: iconNelson,
	zIndex:913,
	shape: shapeNelson
});

var myOptionsInfoboxNelson = {
					 content: contentNelson
					 //This is the bit (2 lines)I have changed.
					,disableAutoPan: true
					,position: iconNelsonLatLng
					,maxWidth: 0
					,pixelOffset: new google.maps.Size(-240, 0)
					,zIndex: null
					,boxStyle: { 
					  background: "url('http://portsmouthhistory.co.uk/pics/template_images/pop_up_box_top_arrow.png') no-repeat"
						  ,width: "500px"
				   }
					,closeBoxMargin: "10px 2px 2px 2px"
					,closeBoxURL: "http://portsmouthhistory.co.uk/pics/template_images/pop_up_box_close_button.png"
					,infoBoxClearance: new google.maps.Size(1, 1)
					,isHidden: false
					,pane: "floatPane"
					,enableEventPropagation: false
};
infoboxNelson = new InfoBox(myOptionsInfoboxNelson);
google.maps.event.addListener(markerNelson, "click", function (e) {
			contentNelson.innerHTML = '<h1>Nelson</h1><p class="pop_up_box_text"> defeated the French and Spanish at the Battle of Trafalgar in 1805. His flagship, HMS Victory, can be visited in the Historic Dockyard.</p><div id="nelson_startslider" onClick="startSlider(\'nelson_startslider\', \'info_nelson\')" OnMouseOver="this.style.cursor=\'pointer\';" OnMouseOut="this.style.cursor=\'default\';"><img src="http://portsmouthhistory.co.uk/pics/info_box_content/nelson/my_nivo/demo/images/hms_victory_start-01.jpg" width="470" height="348" border="0" alt="Admiral Lord Nelson"/></div><div id="info_nelson" style="display:none" ><iframe src="http://portsmouthhistory.co.uk/pics/info_box_content/nelson/my_nivo/demo/demo.php" width="470" height="348" frameborder="0" scrolling="no"></iframe></div><p class="pop_up_box_text_smaller">(Once started, pictures change automatically on iPads etc).</p>';
			/*loading_div.style.display = 'block';*/
	        closeAllBubbles();
			closeCurrentImage();
			infoboxNelson.open(map, this);
			this.setZIndex(google.maps.Marker.MAX_ZINDEX + 1);
			setZoomWhenMarkerClicked();
			/*map.setCenter(markerNelson.getPosition());*/
			var currentZoom = map.getZoom();
			if (currentZoom <= 15){infoboxNelsonLatLng = new google.maps.LatLng(50.773266, -1.104941);}
			else if (currentZoom == 16){infoboxNelsonLatLng = new google.maps.LatLng(50.777309, -1.104941);}
			else if (currentZoom == 17){infoboxNelsonLatLng = new google.maps.LatLng(50.779128, -1.104941);}
			else if (currentZoom == 18){infoboxNelsonLatLng = new google.maps.LatLng(50.779996, -1.104941);}
			map.setCenter(infoboxNelsonLatLng);
			welcomeMessageHide();
			if (mobileOrNot === "true"){			
				makeAllUnClickable();
				makeAllPhotosUnClickable();
			}
			/*setTimeout (function(){loading_div.style.display = 'none';}, 600 );*/
});

//DICKENS -------------------
iconDickensLatLng = new google.maps.LatLng(50.807077, -1.086928);

markerDickens = new google.maps.Marker({
    position: iconDickensLatLng,
    map: map,
    title: 'Charles Dickens',
	icon: iconDickens,
	zIndex:902,
	shape: shapeDickens
});

var myOptionsInfoboxDickens = {
					 content: contentDickens
					 //This is the bit (2 lines)I have changed.
					,disableAutoPan: true
					,position: iconDickensLatLng
					,maxWidth: 0
					,pixelOffset: new google.maps.Size(-241, 0)
					,zIndex: null
					,boxStyle: { 
					  background: "url('http://portsmouthhistory.co.uk/pics/template_images/pop_up_box_top_arrow.png') no-repeat"
						  ,width: "500px"
				   }
					,closeBoxMargin: "10px 2px 2px 2px"
					,closeBoxURL: "http://portsmouthhistory.co.uk/pics/template_images/pop_up_box_close_button.png"
					,infoBoxClearance: new google.maps.Size(1, 1)
					,isHidden: false
					,pane: "floatPane"
					,enableEventPropagation: false
};
infoboxDickens = new InfoBox(myOptionsInfoboxDickens);
google.maps.event.addListener(markerDickens, "click", function (e) {
			contentDickens.innerHTML = '<h1>Charles Dickens</h1><p class="pop_up_box_text"> was born in Portsmouth in 1812. Visit his birthplace between Friday 29th March to Sunday 29th September 2013. </p><div id="dickens_startslider" onClick="startSlider(\'dickens_startslider\', \'info_dickens\')" OnMouseOver="this.style.cursor=\'pointer\';" OnMouseOut="this.style.cursor=\'default\';"><img src="http://portsmouthhistory.co.uk/pics/info_box_content/dickens/my_nivo/demo/images/dickens_portsmouth_start-01.jpg" width="470" height="400" border="0" alt="Charles  Dickens"/></div><div id="info_dickens" style="display:none" ><iframe src="http://portsmouthhistory.co.uk/pics/info_box_content/dickens/my_nivo/demo/demo.php" width="470" height="400" frameborder="0" scrolling="no"></iframe></div><p class="pop_up_box_text_smaller">(Once started, pictures change automatically on iPads etc).</p>';
	        /*loading_div.style.display = 'block';*/
	        closeAllBubbles();
			closeCurrentImage();
			infoboxDickens.open(map, this);
			this.setZIndex(google.maps.Marker.MAX_ZINDEX + 1);
			setZoomWhenMarkerClicked();
			/*map.setCenter(markerDickens.getPosition());*/
			var currentZoom = map.getZoom();
			if (currentZoom <= 15){infoboxDickensLatLng = new google.maps.LatLng(50.799681, -1.086928);}
			else if (currentZoom == 16){infoboxDickensLatLng = new google.maps.LatLng(50.803478, -1.086928);}
			else if (currentZoom == 17){infoboxDickensLatLng = new google.maps.LatLng(50.805287, -1.086928);}
			else if (currentZoom == 18){infoboxDickensLatLng = new google.maps.LatLng(50.806148, -1.086928);}
			map.setCenter(infoboxDickensLatLng);
			welcomeMessageHide();
			if (mobileOrNot === "true"){			
				makeAllUnClickable();
				makeAllPhotosUnClickable();
			}
			/*setTimeout (function(){loading_div.style.display = 'none';}, 600 );*/
});

//HILL FORT-------------------
iconHillFortLatLng = new google.maps.LatLng(50.860320, -1.138823);

markerHillFort = new google.maps.Marker({
    position: iconHillFortLatLng,
    map: map,
    title: 'Fort Nelson',
	icon: iconHillFort,
	shape: shapeHillFort
});

var myOptionsInfoboxHillFort = {
					 content: contentHillFort
					 //This is the bit (2 lines)I have changed.
					,disableAutoPan: true
					,position: iconHillFortLatLng
					,maxWidth: 0
					,pixelOffset: new google.maps.Size(-240, 0)
					,zIndex: null
					,boxStyle: { 
					  background: "url('http://portsmouthhistory.co.uk/pics/template_images/pop_up_box_top_arrow.png') no-repeat"
						  ,width: "500px"
				   }
					,closeBoxMargin: "10px 2px 2px 2px"
					,closeBoxURL: "http://portsmouthhistory.co.uk/pics/template_images/pop_up_box_close_button.png"
					,infoBoxClearance: new google.maps.Size(1, 1)
					,isHidden: false
					,pane: "floatPane"
					,enableEventPropagation: false
};
infoboxHillFort = new InfoBox(myOptionsInfoboxHillFort);
google.maps.event.addListener(markerHillFort, "click", function (e) {
			contentHillFort.innerHTML = '<h1>Fort Nelson</h1><p class="pop_up_box_text"> - Victorian fort on Portsdown Hill. Mainly guns, but also tunnels and nice views.</p><div id="portchester_startslider" onClick="startSlider(\'portchester_startslider\', \'info_portchester\')" OnMouseOver="this.style.cursor=\'pointer\';" OnMouseOut="this.style.cursor=\'default\';"><img src="http://portsmouthhistory.co.uk/pics/info_box_content/fort_nelson/my_nivo/demo/images/fort_nelson_start-01.jpg" width="470" height="258" border="0" alt="Fort Nelson"/></div><div id="info_portchester" style="display:none" ><iframe src="http://portsmouthhistory.co.uk/pics/info_box_content/fort_nelson/my_nivo/demo/demo.php" width="470" height="258" frameborder="0" scrolling="no"></iframe></div><p class="pop_up_box_text_smaller">(Once started, pictures change automatically on iPads etc).</p>';
			/*loading_div.style.display = 'block';*/
			willNeedRecentering = 1;
	        closeAllBubbles();
			closeCurrentImage();
			infoboxHillFort.open(map, this);
			this.setZIndex(google.maps.Marker.MAX_ZINDEX + 1);
			setZoomWhenMarkerClicked();
			/*map.setCenter(markerHillFort.getPosition());*/
			var currentZoom = map.getZoom();
			if (currentZoom <= 15){infoboxHillFortLatLng = new google.maps.LatLng(50.853881, -1.138823);}
			else if (currentZoom == 16){infoboxHillFortLatLng = new google.maps.LatLng(50.857837, -1.138823);}
			else if (currentZoom == 17){infoboxHillFortLatLng = new google.maps.LatLng(50.858936, -1.138823);}
			else if (currentZoom == 18){infoboxHillFortLatLng = new google.maps.LatLng(50.859491, -1.138823);}
			map.setCenter(infoboxHillFortLatLng);
			welcomeMessageHide();
			/*setTimeout (function(){loading_div.style.display = 'none';}, 600 );*/
});

//HILL FORT - lable -------------------
iconHillFortLableLatLng = new google.maps.LatLng(50.812931, -1.068249);

markerHillFortLable = new google.maps.Marker({
    position: iconHillFortLableLatLng,
    map: map,
    title: 'Fort Nelson',
	icon: iconHillFortLable,
	zIndex:901,
	shape: shapeHillFortLable
});
google.maps.event.addListener(markerHillFortLable, 'click', function() {
	contentHillFort.innerHTML = '<h1>Fort Nelson</h1><p class="pop_up_box_text"> - Victorian fort on Portsdown Hill. Mainly guns, but also tunnels and nice views.</p><div id="portchester_startslider" onClick="startSlider(\'portchester_startslider\', \'info_portchester\')" OnMouseOver="this.style.cursor=\'pointer\';" OnMouseOut="this.style.cursor=\'default\';"><img src="http://portsmouthhistory.co.uk/pics/info_box_content/fort_nelson/my_nivo/demo/images/fort_nelson_start-01.jpg" width="470" height="258" border="0" alt="Fort Nelson"/></div><div id="info_portchester" style="display:none" ><iframe src="http://portsmouthhistory.co.uk/pics/info_box_content/fort_nelson/my_nivo/demo/demo.php" width="470" height="258" frameborder="0" scrolling="no"></iframe></div><p class="pop_up_box_text_smaller">(Once started, pictures change automatically on iPads etc).</p>';
	/*loading_div.style.display = 'block';*/
	willNeedRecentering = 1;
    closeAllBubbles();
	closeCurrentImage();
	infoboxHillFort.open(map, markerHillFort);
	this.setZIndex(google.maps.Marker.MAX_ZINDEX + 1);
	setZoomWhenMarkerClicked();
	/*map.setCenter(markerHillFort.getPosition());*/
	var currentZoom = map.getZoom();
	if (currentZoom <= 15){infoboxHillFortLableLatLng = new google.maps.LatLng(50.853881, -1.138823);}
	else if (currentZoom == 16){infoboxHillFortLableLatLng = new google.maps.LatLng(50.857837, -1.138823);}
	else if (currentZoom == 17){infoboxHillFortLableLatLng = new google.maps.LatLng(50.858936, -1.138823);}
	else if (currentZoom == 18){infoboxHillFortLableLatLng = new google.maps.LatLng(50.859491, -1.138823);}
	map.setCenter(infoboxHillFortLableLatLng);
	welcomeMessageHide();
	/*setTimeout (function(){loading_div.style.display = 'none';}, 600 );*/
});

//CASTLE portchester-------------------
iconCastleLatLng = new google.maps.LatLng(50.837302, -1.114554);

markerCastle = new google.maps.Marker({
    position: iconCastleLatLng,
    map: map,
    title: 'Portchester Castle',
	icon: iconCastle,
	shape: shapeCastle
});

var myOptionsInfoboxCastle = {
					 content: contentCastle
					 //This is the bit (2 lines)I have changed.
					,disableAutoPan: true
					,position: iconCastleLatLng
					,maxWidth: 0
					,pixelOffset: new google.maps.Size(-240, 0)
					,zIndex: null
					,boxStyle: { 
					  background: "url('http://portsmouthhistory.co.uk/pics/template_images/pop_up_box_top_arrow.png') no-repeat"
						  ,width: "500px"
				   }
					,closeBoxMargin: "10px 2px 2px 2px"
					,closeBoxURL: "http://portsmouthhistory.co.uk/pics/template_images/pop_up_box_close_button.png"
					,infoBoxClearance: new google.maps.Size(1, 1)
					,isHidden: false
					,pane: "floatPane"
					,enableEventPropagation: false
};
infoboxCastle = new InfoBox(myOptionsInfoboxCastle);
google.maps.event.addListener(markerCastle, "click", function (e) {
			contentCastle.innerHTML = '<h1>Portchester Castle</h1><p class="pop_up_box_text"> - Built in the 3rd century by the Romans, and enhanced in the 11th century by the Normans. Good place for a picnic. </p><div id="portchester_startslider" onClick="startSlider(\'portchester_startslider\', \'info_portchester\')" OnMouseOver="this.style.cursor=\'pointer\';" OnMouseOut="this.style.cursor=\'default\';"><img src="http://portsmouthhistory.co.uk/pics/info_box_content/portchester_castle/my_nivo/demo/images/portchester_castle_start-01.jpg" width="470" height="325" border="0" alt="Portchester Castle"/></div><div id="info_portchester" style="display:none" ><iframe src="http://portsmouthhistory.co.uk/pics/info_box_content/portchester_castle/my_nivo/demo/demo.php" width="470" height="325" frameborder="0" scrolling="no"></iframe></div><p class="pop_up_box_text_smaller">(Once started, pictures change automatically on iPads etc).</p>';
			/*loading_div.style.display = 'block';*/
	        willNeedRecentering = 1;
	        closeCurrentImage();
	        closeAllBubbles();
			infoboxCastle.open(map, this);
			this.setZIndex(google.maps.Marker.MAX_ZINDEX + 1);
			setZoomWhenMarkerClicked();
			/*map.setCenter(markerCastle.getPosition());*/
			var currentZoom = map.getZoom();
			if (currentZoom <= 15){infoboxCastleLatLng = new google.maps.LatLng(50.830924, -1.114554);}
			else if (currentZoom == 16){infoboxCastleLatLng = new google.maps.LatLng(50.834100, -1.114554);}
			else if (currentZoom == 17){infoboxCastleLatLng = new google.maps.LatLng(50.835660, -1.114554);}
			else if (currentZoom == 18){infoboxCastleLatLng = new google.maps.LatLng(50.836475, -1.114554);}
			map.setCenter(infoboxCastleLatLng);
			welcomeMessageHide();
			/*setTimeout (function(){loading_div.style.display = 'none';}, 600 );*/
});

//CASTLE - portchester - lable-------------------
iconCastleLableLatLng = new google.maps.LatLng(50.815263, -1.110220);

markerCastleLable = new google.maps.Marker({
    position: iconCastleLableLatLng,
    map: map,
    title: 'Portchester Castle',
	icon: iconCastleLable,
	zIndex:900,
	shape: shapeCastleLable
});
google.maps.event.addListener(markerCastleLable, 'click', function() {
	contentCastle.innerHTML = '<h1>Portchester Castle</h1><p class="pop_up_box_text"> - Built in the 3rd century by the Romans, and enhanced in the 11th century by the Normans. Good place for a picnic. </p><div id="portchester_startslider" onClick="startSlider(\'portchester_startslider\', \'info_portchester\')" OnMouseOver="this.style.cursor=\'pointer\';" OnMouseOut="this.style.cursor=\'default\';"><img src="http://portsmouthhistory.co.uk/pics/info_box_content/portchester_castle/my_nivo/demo/images/portchester_castle_start-01.jpg" width="470" height="325" border="0" alt="Portchester Castle"/></div><div id="info_portchester" style="display:none" ><iframe src="http://portsmouthhistory.co.uk/pics/info_box_content/portchester_castle/my_nivo/demo/demo.php" width="470" height="325" frameborder="0" scrolling="no"></iframe></div><p class="pop_up_box_text_smaller">(Once started, pictures change automatically on iPads etc).</p>';
	/*loading_div.style.display = 'block';*/
	willNeedRecentering = 1;
	closeCurrentImage();
	closeAllBubbles();
	infoboxCastle.open(map, markerCastle);
	this.setZIndex(google.maps.Marker.MAX_ZINDEX + 1);
	setZoomWhenMarkerClicked();
	/*map.setCenter(markerCastle.getPosition());*/
			var currentZoom = map.getZoom();
			if (currentZoom <= 15){infoboxCastleLableLatLng = new google.maps.LatLng(50.830924, -1.114554);}
			else if (currentZoom == 16){infoboxCastleLableLatLng = new google.maps.LatLng(50.834100, -1.114554);}
			else if (currentZoom == 17){infoboxCastleLableLatLng = new google.maps.LatLng(50.835660, -1.114554);}
			else if (currentZoom == 18){infoboxCastleLableLatLng = new google.maps.LatLng(50.836475, -1.114554);}
	map.setCenter(infoboxCastleLableLatLng);
	welcomeMessageHide();
	/*setTimeout (function(){loading_div.style.display = 'none';}, 600 );*/
});

//HARBOUR
iconLabelHarbourLatLng = new google.maps.LatLng(50.789931, -1.106873);

markerLabelHarbour = new google.maps.Marker({
    position: iconLabelHarbourLatLng,
    map: map,
    title: 'Old Portsmouth',
	icon: iconLabelHarbour,
	zIndex:908,
	shape: shapeLabelHarbour
});

var myOptionsInfoboxHarbour = {
					 content: contentHarbour
					 //This is the bit (2 lines)I have changed.
					,disableAutoPan: true
					,position: iconLabelHarbourLatLng
					,maxWidth: 0
					,pixelOffset: new google.maps.Size(-240, 0)
					,zIndex: null
					,boxStyle: { 
					  background: "url('http://portsmouthhistory.co.uk/pics/template_images/pop_up_box_top_arrow.png') no-repeat"
						  ,width: "500px"
				   }
					,closeBoxMargin: "10px 2px 2px 2px"
					,closeBoxURL: "http://portsmouthhistory.co.uk/pics/template_images/pop_up_box_close_button.png"
					,infoBoxClearance: new google.maps.Size(1, 1)
					,isHidden: false
					,pane: "floatPane"
					,enableEventPropagation: false
};
infoboxHarbour = new InfoBox(myOptionsInfoboxHarbour);
google.maps.event.addListener(markerLabelHarbour, "click", function (e) {
			contentHarbour.innerHTML = '<h1>Old Portsmouth</h1><div id="harbour_startslider" onClick="startSlider(\'harbour_startslider\', \'info_harbour\')" OnMouseOver="this.style.cursor=\'pointer\';" OnMouseOut="this.style.cursor=\'default\';"><img src="http://portsmouthhistory.co.uk/pics/info_box_content/old_portsmouth/my_nivo_new/demo/images/old_portsmouth_start-01.jpg" width="470" height="291" border="0" alt="Old Portsmouth"/></div><div id="info_harbour" style="display:none" ><iframe src="http://portsmouthhistory.co.uk/pics/info_box_content/old_portsmouth/my_nivo_new/demo/demo.php" width="470" height="291" frameborder="0" scrolling="no"></iframe></div><p class="pop_up_box_text_smaller">(Once started, pictures change automatically on iPads etc).</p>';
			/*loading_div.style.display = 'block';*/
			closeCurrentImage();
	        closeAllBubbles();
			infoboxHarbour.open(map, this);
			this.setZIndex(google.maps.Marker.MAX_ZINDEX + 1);
			setZoomWhenMarkerClicked();
			/*map.setCenter(markerLabelHarbour.getPosition());*/
			var currentZoom = map.getZoom();
			if (currentZoom <= 15){infoboxLabelHarbourLatLng = new google.maps.LatLng(50.784690, -1.106873);}
			else if (currentZoom == 16){infoboxLabelHarbourLatLng = new google.maps.LatLng(50.787243, -1.106873);}
			else if (currentZoom == 17){infoboxLabelHarbourLatLng = new google.maps.LatLng(50.788743, -1.106873);}
			else if (currentZoom == 18){infoboxLabelHarbourLatLng = new google.maps.LatLng(50.789279, -1.106873);}
			map.setCenter(infoboxLabelHarbourLatLng);
			welcomeMessageHide();
			if (mobileOrNot === "true"){			
			makeAllUnClickable();
			makeAllPhotosUnClickable();
			}
			/*setTimeout (function(){loading_div.style.display = 'none';}, 600 );*/
});

//WINDMILL
iconWindmillLatLng = new google.maps.LatLng(50.785916, -1.078860);

markerWindmill = new google.maps.Marker({
    position: iconWindmillLatLng,
    map: map,
    title: 'Old photographs',
	icon: iconWindmill,
	zIndex:815,
	shape: shapeWindmill
});

var myOptionsInfoboxWindmill = {
					 content: contentWindmill
					 //This is the bit (2 lines)I have changed.
					,disableAutoPan: true
					,position: iconWindmillLatLng
					,maxWidth: 0
					,pixelOffset: new google.maps.Size(-240, 0)
					,zIndex: null
					,boxStyle: { 
					  background: "url('http://portsmouthhistory.co.uk/pics/template_images/pop_up_box_top_arrow.png') no-repeat"
						  ,width: "380px"
				   }
					,closeBoxMargin: "10px 2px 2px 2px"
					,closeBoxURL: "http://portsmouthhistory.co.uk/pics/template_images/pop_up_box_close_button.png"
					,infoBoxClearance: new google.maps.Size(1, 1)
					,isHidden: false
					,pane: "floatPane"
					,enableEventPropagation: false
};
infoboxWindmill = new InfoBox(myOptionsInfoboxWindmill);
google.maps.event.addListener(markerWindmill, "click", function (e) {
			contentWindmill.innerHTML = "<p class='pop_up_box_text'>The Dock Mill. </p><p><img src='http://portsmouthhistory.co.uk/pics/info_box_content/windmill/portsmouth_windmill1.jpg' width='350' height='498' border='0' /></p><p class='pop_up_box_text'>For more photographs, select Old Photgraphs (right).</p> <img src='http://portsmouthhistory.co.uk/pics/info_box_content/windmill/arrow-01.png' width='46' height='13' border='0' />";
			/*loading_div.style.display = 'block';*/
			closeCurrentImage();
	        closeAllBubbles();
			infoboxWindmill.open(map, this);
			this.setZIndex(google.maps.Marker.MAX_ZINDEX + 1);
			setZoomWhenMarkerClicked();
			/*map.setCenter(markerWindmill.getPosition());*/
			var currentZoom = map.getZoom();
			if (currentZoom <= 15){infoboxWindmillLatLng = new google.maps.LatLng(50.777542, -1.078860);}
			else if (currentZoom == 16){infoboxWindmillLatLng = new google.maps.LatLng(50.781816, -1.078860);}
			else if (currentZoom == 17){infoboxWindmillLatLng = new google.maps.LatLng(50.783798, -1.078860);}
			else if (currentZoom == 18){infoboxWindmillLatLng = new google.maps.LatLng(50.784856, -1.078860);}
			map.setCenter(infoboxWindmillLatLng);
			welcomeMessageHide();
			if (mobileOrNot === "true"){			
			makeAllUnClickable();
			makeAllPhotosUnClickable();
			}
			/*setTimeout (function(){loading_div.style.display = 'none';}, 600 );*/
});

//DOCK - zoomed
iconDockZoomedLatLng = new google.maps.LatLng(50.798842, -1.107194);

markerDockZoomed = new google.maps.Marker({
    position: iconDockZoomedLatLng,
    map: map,
    title: 'Historic Dockyard',
	icon: iconDockZoomed,
	zIndex:905,
	shape: shapeDock
});
markerDockZoomed.setVisible (false); 

var myOptionsInfoboxDockZoomed = {
					 content: contentDockZoomed
					 //This is the bit (2 lines)I have changed.
					,disableAutoPan: true
					,position: iconDockZoomedLatLng
					,maxWidth: 0
					,pixelOffset: new google.maps.Size(-240, 0)
					,zIndex: null
					,boxStyle: { 
					  background: "url('http://portsmouthhistory.co.uk/pics/template_images/pop_up_box_top_arrow.png') no-repeat"
						  ,width: "500px"
				   }
					,closeBoxMargin: "10px 2px 2px 2px"
					,closeBoxURL: "http://portsmouthhistory.co.uk/pics/template_images/pop_up_box_close_button.png"
					,infoBoxClearance: new google.maps.Size(1, 1)
					,isHidden: false
					,pane: "floatPane"
					,enableEventPropagation: false
};
infoboxDock = new InfoBox(myOptionsInfoboxDockZoomed);
google.maps.event.addListener(markerDockZoomed, "click", function (e) {
			contentDockZoomed.innerHTML = '<p class="pop_up_box_text">HMS Victory, HMS Warrior and the Mary Rose, along with the National Museum of the Royal Navy, can be visited at </p><h1>Portsmouth Historic Dockyard.</h1><div id="historicdockyard_startslider" onClick="startSlider(\'historicdockyard_startslider\', \'info_historicdockyard\')" OnMouseOver="this.style.cursor=\'pointer\';" OnMouseOut="this.style.cursor=\'default\';"><img src="http://portsmouthhistory.co.uk/pics/info_box_content/dockyard/my_nivo/demo/images/dockyard_start-01.jpg" width="470" height="297" border="0" alt="Portsmouth Historic Dockyard"/></div><div id="info_historicdockyard" style="display:none" ><iframe src="http://portsmouthhistory.co.uk/pics/info_box_content/dockyard/my_nivo/demo/demo.php" width="470" height="297" frameborder="0" scrolling="no"></iframe></div><p class="pop_up_box_text_smaller">(Once started, pictures change automatically on iPads etc).</p>';
			/*loading_div.style.display = 'block';*/
			closeCurrentImage();
	        closeAllBubbles();
			infoboxDock.open(map, this);
			this.setZIndex(google.maps.Marker.MAX_ZINDEX + 1);
			setZoomWhenMarkerClicked();
			/*map.setCenter(markerDockZoomed.getPosition());*/
			var currentZoom = map.getZoom();
			if (currentZoom <= 15){infoboxDockZoomedLatLng = new google.maps.LatLng(50.793143, -1.107194);}
			else if (currentZoom == 16){infoboxDockZoomedLatLng = new google.maps.LatLng(50.795937, -1.107194);}
			else if (currentZoom == 17){infoboxDockZoomedLatLng = new google.maps.LatLng(50.797484, -1.107194);}
			else if (currentZoom == 18){infoboxDockZoomedLatLng = new google.maps.LatLng(50.798149, -1.107194);}
			map.setCenter(infoboxDockZoomedLatLng);
			welcomeMessageHide();
			if (mobileOrNot === "true"){			
				makeAllUnClickable();
				makeAllPhotosUnClickable();
			}
			/*setTimeout (function(){loading_div.style.display = 'none';}, 600 );*/
});


//DOCK
iconDockLatLng = new google.maps.LatLng(50.796496, -1.092367);

markerDock = new google.maps.Marker({
    position: iconDockLatLng,
    map: map,
    title: 'Historic Dockyard',
	icon: iconDock,
	zIndex:905,
	shape: shapeDockZoomed
});
var contentDock = document.createElement("div");
contentDock.style.cssText = pop_up_info;		
google.maps.event.addListener(markerDock, "click", function (e) {
			contentDockZoomed.innerHTML = '<p class="pop_up_box_text">HMS Victory, HMS Warrior and the Mary Rose, along with the National Museum of the Royal Navy, can be visited at </p><h1>Portsmouth Historic Dockyard.</h1><div id="historicdockyard_startslider" onClick="startSlider(\'historicdockyard_startslider\', \'info_historicdockyard\')" OnMouseOver="this.style.cursor=\'pointer\';" OnMouseOut="this.style.cursor=\'default\';"><img src="http://portsmouthhistory.co.uk/pics/info_box_content/dockyard/my_nivo/demo/images/dockyard_start-01.jpg" width="470" height="297" border="0" alt="Portsmouth Historic Dockyard"/></div><div id="info_historicdockyard" style="display:none" ><iframe src="http://portsmouthhistory.co.uk/pics/info_box_content/dockyard/my_nivo/demo/demo.php" width="470" height="297" frameborder="0" scrolling="no"></iframe></div><p class="pop_up_box_text_smaller">(Once started, pictures change automatically on iPads etc).</p>';
			/*loading_div.style.display = 'block';*/
			closeCurrentImage();
	        closeAllBubbles();
			infoboxDock.open(map, markerDockZoomed);
			markerDockZoomed.setZIndex(google.maps.Marker.MAX_ZINDEX + 1);
			setZoomWhenMarkerClicked();
			/*map.setCenter(markerDockZoomed.getPosition());*/
			var currentZoom = map.getZoom();
			if (currentZoom <= 15){infoboxDockLatLng = new google.maps.LatLng(50.793143, -1.107194);}
			else if (currentZoom == 16){infoboxDockLatLng = new google.maps.LatLng(50.795937, -1.107194);}
			else if (currentZoom == 17){infoboxDockLatLng = new google.maps.LatLng(50.797484, -1.107194);}
			else if (currentZoom == 18){infoboxDockLatLng = new google.maps.LatLng(50.798149, -1.107194);}
			map.setCenter(infoboxDockLatLng);
			welcomeMessageHide();
			if (mobileOrNot === "true"){			
			makeAllUnClickable();
			makeAllPhotosUnClickable();
			}
			/*setTimeout (function(){loading_div.style.display = 'none';}, 600 );*/
});

//GUNWARF
iconGunwarfLatLng = new google.maps.LatLng(50.795466, -1.105317);

markerGunwarf = new google.maps.Marker({
    position: iconGunwarfLatLng,
    map: map,
    title: 'The Gunwarf',
	icon: iconGunwarf,
	zIndex:801,
	shape: shapeGunwarf
});

var myOptionsInfoboxGunwarf = {
					 content: contentGunwarf
					 //This is the bit (2 lines)I have changed.
					,disableAutoPan: true
					,position: iconGunwarfLatLng
					,maxWidth: 0
					,pixelOffset: new google.maps.Size(-240, 0)
					,zIndex: null
					,boxStyle: { 
					  background: "url('http://portsmouthhistory.co.uk/pics/template_images/pop_up_box_top_arrow.png') no-repeat"
						  ,width: "430px"
				   }
					,closeBoxMargin: "10px 2px 2px 2px"
					,closeBoxURL: "http://portsmouthhistory.co.uk/pics/template_images/pop_up_box_close_button.png"
					,infoBoxClearance: new google.maps.Size(1, 1)
					,isHidden: false
					,pane: "floatPane"
					,enableEventPropagation: false
};
infoboxGunwarf = new InfoBox(myOptionsInfoboxGunwarf);
google.maps.event.addListener(markerGunwarf, "click", function (e) {
			contentGunwarf.innerHTML = "<h1>The Gunwarf Quays</h1><p class='pop_up_box_text'> - Previously HMS Vernon. Now - outlet shopping, pubs and restaurants ... and a massive tower! </p><p><img src='http://portsmouthhistory.co.uk/pics/info_box_content/gunwarf/gunwarf1.jpg' width='400' height='429' border='0' alt='The Gunwarf Portsmouth'/></p>";
			/*loading_div.style.display = 'block';*/
			closeCurrentImage();
	        closeAllBubbles();
			infoboxGunwarf.open(map, this);
			this.setZIndex(google.maps.Marker.MAX_ZINDEX + 1);
			setZoomWhenMarkerClicked();
			/*map.setCenter(markerGunwarf.getPosition());*/
			var currentZoom = map.getZoom();
			if (currentZoom <= 15){infoboxGunwarfLatLng = new google.maps.LatLng(50.788328, -1.105317);}
			else if (currentZoom == 16){infoboxGunwarfLatLng = new google.maps.LatLng(50.791773, -1.105317);}
			else if (currentZoom == 17){infoboxGunwarfLatLng = new google.maps.LatLng(50.793558, -1.105317);}
			else if (currentZoom == 18){infoboxGunwarfLatLng = new google.maps.LatLng(50.794580, -1.105317);}
			map.setCenter(infoboxGunwarfLatLng);
			welcomeMessageHide();
			if (mobileOrNot === "true"){			
			makeAllUnClickable();
			makeAllPhotosUnClickable();
			}
			/*setTimeout (function(){loading_div.style.display = 'none';}, 600 );*/
});

//TRAIN
iconTrainLatLng = new google.maps.LatLng(50.781820, -1.078387);

markerTrain = new google.maps.Marker({
    position: iconTrainLatLng,
    map: map,
    title: 'Southsea Train Station',
	icon: iconTrain,
	zIndex:801,
	shape: shapeTrain
});

var myOptionsInfoboxTrain = {
					 content: contentTrain
					 //This is the bit (2 lines)I have changed.
					,disableAutoPan: true
					,position: iconTrainLatLng
					,maxWidth: 0
					,pixelOffset: new google.maps.Size(-240, 0)
					,zIndex: null
					,boxStyle: { 
					  background: "url('http://portsmouthhistory.co.uk/pics/template_images/pop_up_box_top_arrow.png') no-repeat"
						  ,width: "523px"
				   }
					,closeBoxMargin: "10px 2px 2px 2px"
					,closeBoxURL: "http://portsmouthhistory.co.uk/pics/template_images/pop_up_box_close_button.png"
					,infoBoxClearance: new google.maps.Size(1, 1)
					,isHidden: false
					,pane: "floatPane"
					,enableEventPropagation: false
};
infoboxTrain = new InfoBox(myOptionsInfoboxTrain);
google.maps.event.addListener(markerTrain, "click", function (e) {
			contentTrain.innerHTML = "<p class='pop_up_box_text'>East Southsea railway - closed a long time ago. </p><p><img src='http://portsmouthhistory.co.uk/pics/info_box_content/train/train3.jpg' width='493' height='383' border='0' alt='Southsea railway' /></p>";
			/*loading_div.style.display = 'block';*/
			closeCurrentImage();
	        closeAllBubbles();
			infoboxTrain.open(map, this);
			this.setZIndex(google.maps.Marker.MAX_ZINDEX + 1);
			setZoomWhenMarkerClicked();
			/*map.setCenter(markerTrain.getPosition());*/
			var currentZoom = map.getZoom();
			if (currentZoom <= 15){infoboxTrainLatLng = new google.maps.LatLng(50.776115, -1.078387);}
			else if (currentZoom == 16){infoboxTrainLatLng = new google.maps.LatLng(50.778641, -1.078387);}
			else if (currentZoom == 17){infoboxTrainLatLng = new google.maps.LatLng(50.780161, -1.078387);}
			else if (currentZoom == 18){infoboxTrainLatLng = new google.maps.LatLng(50.780990, -1.078387);}
			map.setCenter(infoboxTrainLatLng);
			welcomeMessageHide();
			if (mobileOrNot === "true"){			
			makeAllUnClickable();
			makeAllPhotosUnClickable();
			}
			/*setTimeout (function(){loading_div.style.display = 'none';}, 600 );*/
});

//Canoe
iconCanoeLatLng = new google.maps.LatLng(50.780573, -1.072133);

markerCanoe = new google.maps.Marker({
    position: iconCanoeLatLng,
    map: map,
    title: 'Canoe Lake',
	icon: iconCanoe,
	zIndex:811,
	shape: shapeCanoe
});

var myOptionsInfoboxCanoe = {
					 content: contentCanoe
					 //This is the bit (2 lines)I have changed.
					,disableAutoPan: true
					,position: iconCanoeLatLng
					,maxWidth: 0
					,pixelOffset: new google.maps.Size(-240, 0)
					,zIndex: null
					,boxStyle: { 
					  background: "url('http://portsmouthhistory.co.uk/pics/template_images/pop_up_box_top_arrow.png') no-repeat"
						  ,width: "530px"
				   }
					,closeBoxMargin: "10px 2px 2px 2px"
					,closeBoxURL: "http://portsmouthhistory.co.uk/pics/template_images/pop_up_box_close_button.png"
					,infoBoxClearance: new google.maps.Size(1, 1)
					,isHidden: false
					,pane: "floatPane"
					,enableEventPropagation: false
};
infoboxCanoe = new InfoBox(myOptionsInfoboxCanoe);
google.maps.event.addListener(markerCanoe, "click", function (e) {
			contentCanoe.innerHTML = "<p class='pop_up_box_text'>OK - I&#39;ve abandoned the historical places theme with </p> <h1>Canoe Lake!</h1> <p class='pop_up_box_text'> Worth a visit though ... all the usual seaside things... </p><p><img src='http://portsmouthhistory.co.uk/pics/info_box_content/canoe/canoe2.jpg' width='500' height='500' border='0' alt='Canoe Lake - Southsea' /></p><p class='pop_up_box_text'>Image credit - Canoe Lake Facebook page.</p>";
			/*loading_div.style.display = 'block';*/
			closeCurrentImage();
	        closeAllBubbles();
			infoboxCanoe.open(map, this);
			this.setZIndex(google.maps.Marker.MAX_ZINDEX + 1);
			setZoomWhenMarkerClicked();
			/*map.setCenter(markerCanoe.getPosition());*/
			var currentZoom = map.getZoom();
			if (currentZoom <= 15){infoboxCanoeLatLng = new google.maps.LatLng(50.772590, -1.072133);}
			else if (currentZoom == 16){infoboxCanoeLatLng = new google.maps.LatLng(50.776441, -1.072133);}
			else if (currentZoom == 17){infoboxCanoeLatLng = new google.maps.LatLng(50.778368, -1.072133);}
			else if (currentZoom == 18){infoboxCanoeLatLng = new google.maps.LatLng(50.779260, -1.072133);}
			map.setCenter(infoboxCanoeLatLng);
			welcomeMessageHide();
			if (mobileOrNot === "true"){			
			makeAllUnClickable();
			makeAllPhotosUnClickable();
			}
			/*setTimeout (function(){loading_div.style.display = 'none';}, 600 );*/
});

}


//Image sliders in into boxes.
function startSlider(startSlide, nivoSlider){
/*"use strict";*/ 
var currentStartSlide = startSlide;
	var currentNivoSlide = nivoSlider;
	eval(currentStartSlide).style.display='none';
	eval(currentNivoSlide).style.display='block';
}

function setZoomWhenMarkerClicked(){
/*"use strict";*/ 
var currentZoom = map.getZoom();
	if (currentZoom < 15){
			map.setZoom(15);
	}
}

//CURRENTLY NOT IN USE - Suit of 3 functions to preload the images. This aims to reduce the problem that when you first click on a photo it takes a while to load.
function preloadImages (){
/*"use strict";*/ 
$.getJSON("http://api.flickr.com/services/rest/?&method=flickr.photos.search&api_key=f1b5a1d74663b5c1f48240d06bb336a4&user_id=93146611@N08&lat=50.789887&radius=5&has_geo=1&extras=geo,original_format&format=json&jsoncallback=?", loadImagesEarly );
}

function loadImagesEarly (data){
/*"use strict";*/ 
photoURLArray = [];	
	$.each(data.photos.photo, function(i,item){
		secretKeyPre = item.originalsecret;
		//gets the url for the image
		var photoURL = 'http://farm' + item.farm + '.static.flickr.com/' + item.server + '/' + item.id + '_' + secretKeyPre + '_o.jpg';
		photoURLArray [i] = photoURL;
		
	});
	preloadImagesProcess (photoURLArray);
}

function preloadImagesProcess (inputImages){
/*"use strict";*/ 
for (var loop = 0; loop < inputImages.length; loop++) {
		var an_image = new Image ();
		an_image.src = inputImages[loop];
	}
	
}

//Function for replacing the marker icon with the orignal one when the Infobox (photos) is closed. (called from the Infobox function in the seperate js file itself).
function replaceImageMarker (){
/*"use strict";*/ 
imageMarker[currentImage].setIcon(iconURL); 
}

//function for when fort nelson or portchester castle are clicked. ie. so when they are closed, the map returns to the main position.
function recenter (){
/*"use strict";*/ 
if (willNeedRecentering === 1){
map.setCenter(mainLatLng);
map.setZoom(14);
willNeedRecentering = 0;
}	
}

function welcomeMessage (){
/*"use strict";*/ 
	iconLabelWelcomeLatLng = new google.maps.LatLng(50.799941, -1.059279);
	markerLabelWelcome = new google.maps.Marker({
    position: iconLabelWelcomeLatLng,
    map: map,
    title: 'Welcome message',
	icon: iconLabelWelcome,
	zIndex:999,
	shape: shapeWelcome
});
google.maps.event.addListener(markerLabelWelcome, "click", function (e) {
			welcomeMessageHide();
});
}

function welcomeMessageShow (){
/*"use strict";*/ 
markerLabelWelcome.setVisible(true); 
}

function welcomeMessageHide (){
/*"use strict";*/ 
markerLabelWelcome.setVisible(false); 
}

function resetZindexs (){
/*"use strict";*/ 
markerDockyard.setZIndex(903);
markerPoint.setZIndex(907);
markerMaryRose.setZIndex(909);
markerWarrior.setZIndex(906);
markerSeafort.setZIndex(914);
markerSouthseaCastle.setZIndex(912);
markerCityMuseum.setZIndex(803);
markerHGWells.setZIndex(804);
markerJohnPounds.setZIndex(802);
markerConanDoyle.setZIndex(805);
markerDday.setZIndex(910);
markerMarines.setZIndex(915);
markerSSPLable.setZIndex(911);
markerBaffins.setZIndex(800);
markerHolbrooke.setZIndex(807);
markerUnwin.setZIndex(810);
markerEllis.setZIndex(808);
markerKipling.setZIndex(806);
markerEllen.setZIndex(810);
markerBlitz.setZIndex(904);
markerBrunel.setZIndex(801);
markerNelson.setZIndex(913);
markerDickens.setZIndex(902);
markerHillFortLable.setZIndex(901);
markerCastleLable.setZIndex(900);
markerLabelHarbour.setZIndex(908);
markerDockZoomed.setZIndex(905);
markerDock.setZIndex(905);
markerWindmill.setZIndex(815);
markerGunwarf.setZIndex(801);
markerTrain.setZIndex(801);
markerCanoe.setZIndex(811);
}

function makeAllClickable (){
/*"use strict";*/ 
markerDockyard.setClickable(true);
markerPoint.setClickable(true);
markerMaryRose.setClickable(true);
markerWarrior.setClickable(true);
markerSeafort.setClickable(true);
markerSouthseaCastle.setClickable(true);
markerCityMuseum.setClickable(true);
markerHGWells.setClickable(true);
markerJohnPounds.setClickable(true);
markerConanDoyle.setClickable(true);
markerDday.setClickable(true);
markerMarines.setClickable(true);
markerSSPLable.setClickable(true);
markerBaffins.setClickable(true);
markerHolbrooke.setClickable(true);
markerUnwin.setClickable(true);
markerEllis.setClickable(true);
markerKipling.setClickable(true);
markerEllen.setClickable(true);
markerBlitz.setClickable(true);
markerBrunel.setClickable(true);
markerNelson.setClickable(true);
markerDickens.setClickable(true);
markerHillFortLable.setClickable(true);
markerCastleLable.setClickable(true);
markerLabelHarbour.setClickable(true);
markerGunwarf.setClickable(true);
markerTrain.setClickable(true);
markerCanoe.setClickable(true);
}

function makeAllUnClickable (){
/*"use strict";*/ 
markerDockyard.setClickable(false);
markerPoint.setClickable(false);
markerMaryRose.setClickable(false);
markerWarrior.setClickable(false);
markerSeafort.setClickable(false);
markerSouthseaCastle.setClickable(false);
markerCityMuseum.setClickable(false);
markerHGWells.setClickable(false);
markerJohnPounds.setClickable(false);
markerConanDoyle.setClickable(false);
markerDday.setClickable(false);
markerMarines.setClickable(false);
markerSSPLable.setClickable(false);
markerBaffins.setClickable(false);
markerHolbrooke.setClickable(false);
markerUnwin.setClickable(false);
markerEllis.setClickable(false);
markerKipling.setClickable(false);
markerEllen.setClickable(false);
markerBlitz.setClickable(false);
markerBrunel.setClickable(false);
markerNelson.setClickable(false);
markerDickens.setClickable(false);
markerHillFortLable.setClickable(false);
markerCastleLable.setClickable(false);
markerLabelHarbour.setClickable(false);
markerGunwarf.setClickable(false);
markerCanoe.setClickable(false);
markerTrain.setClickable(false);
}

function stopAllVideos(){
/*"use strict";*/ 
//contentMaryRose.innerHTML = '<span class="pop_up_box_text">The  was sank in battle in the Solent in 1545. She actually sank a little further East than this marker suggests. </span><p>&nbsp;</p><iframe id="VideoPlayerMaryRose" width="470" height="225" src="" frameborder="0" allowfullscreen></iframe>';
	//maryRoseVideo.src='about:blank';
	//contentMaryRose.removeChild(maryRoseVideo);
	//document.getElementById('maryRoseYouTube').src='';
	//document.getElementById('VideoPlayerSandel').src='http://www.youtube.com/embed/kBdfcR-8hEY';
	contentMaryRose.innerHTML= ''; 
}

</script>